March 1, 2013

Robust page layout when re-sizing

Question by Sam

I currently have two divs on my page that are about center-left, and they’re both floated left. My problem is that when I resize the page to make it smaller, the right div will sink under the left div, and I would prefer it to maintain it’s position next the the other div.

What CSS sorcery would allow me to do this? (if any)

Answer by hmb

Hi Please check the following corresponding codes, it ll helps you….

<html>
    <head>
        <style type="text/css">
            #left {
                border:1px solid red;
                width:40%;
                height:auto;
                float:left;
            }
            #right {
                border:1px solid blue;
                width:40%;
                height:auto;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="left">
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
        </div>
        <div id="right">
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
        </div>
    </body>
</html>

Answer by Starx

While developing a fluid layout, a common mistake is mixing, % units with px values.

Size of % is respective to available space and does not work efficiently when there are values with px or em or ...

If you are using % units to size the layouts, you have to make sure, you have to % for everything border, padding, margin.

For such layout

<div id="left">
    Left
</div>
<div id="center">
    Center
</div>

CSS,

#left, #center { float: left; }
#left { width: 26%; padding: 2%; }
#center { width: 66%; padding: 2%; }
April 5, 2012

CSS Text on an Image

Question by DJ Howarth

I have the hardest time with CSS because it is so fickle it seems. Need to help with this.

I want my “section.png” image to be the Header Bar, which is clickable, and a table Expands and Collapses as you click the Header Bar.

<table width="100%">
 <tr>
 <td width=80% align=left>
 <font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font>
 </td>
 <td align=right><font color="white" size="2">
    <div id='oc5' style="border-style: none; vertical-align:bottom;">
<img src="http://.../images/expand.png" width="15" height="15" style="border-style: none; vertical-align:top;">&nbsp;Show&nbsp;
</div></font>
</td>
</tr>
</table>
</div>

^^^
Everything in the “Div” above needs to be on top of the section.png image.
^^^

<div id="id5" style="display: none">    

<table width=80% align="center">
<tr align="left">
    <td colspan="2" align="right">
   Hidden text - Until Header Bar is Clicked.
    </td>
</tr>
</table>
</div>

I have looked around for answers, regarding this issue. I know it has to do with CSS and float or position and absolute or relative. IDK, I cant figure it out. Can someone steer me in the right direction.

Answer by Starx

The correct way to do this, would be to set a background instead of adding a image element

<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
    <div class="text">...</div>
</div>
March 12, 2012

Aligning these three containers evenly

Question by Evan

I would like this layout to look as follows:

__________________________
|  |                      |
|  ------------------------
|__|______________________|

That is how I want the header to look. However, as you can see at the below link, the two div’s on the right side are dropping off:
http://jsfiddle.net/A5YDJ/3/

Any ideas?

Answer by Filype

You forgot to add float:left to the #left-box

#left-box{
 width:190px;
 height:90px;
 background-color:blue; 
 float:left;
}

Have a look at this: http://jsfiddle.net/puCrJ/

Answer by Starx

Use

float:left;

Check you updated fiddle here

March 6, 2012

Float over iframes html

Question by Ma9ic

Is it possible to float a nav bar over a iframe here is the code that i have so far?

the nav bar as you will be is in the html page and contains buttons that trigger the iframe to go to the next page etc.

Any ideas?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fraud Protection - Course</title>
<style>
    .backbutton[type="button"] {
        border: 0;
        background: url("back.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
        .nextbutton[type="button"] {
        border: 0;
        background: url("next.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
            .savebutton[type="button"] {
        border: 0;
        background: url("save.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
</style>
</head>
<body>

    <iframe src="" width="100%" class="naviframe" id="contentFrame" hieght="100%"></iframe>
    <div id="navDiv">
     <input type="button" class="backbutton" id="butPrevious" onclick="doPrevious();" value="<- Previous"/>
        <input type="button" class="nextbutton" value="Next ->" img src="/images/Btn.PNG" id="butNext" onclick="doNext();"/>
        <input type="button" class="savebutton" value="Save Progress"  img src="/images/Btn.PNG" id="butExit" onclick="doExit();"/>
    </div>

</body>
</html>

Answer by Starx

It is possible. You have to position the element to be floated, as absolute with negative margin.

Demo

December 31, 2011

How to use the float:left property in CSS without having the trouble I have?

Question by Prateek

i’m trying to create a flow layout and i’m having some trouble using float:left property in css.

I have one parent container which has 100% width and 100% height. It contains three containers:
The header, the menu container, and the content container.
The menu is a vertical menu,not a horizontal menu. It comes below the header and then the content container floats left on the menu container.
Now the problem is i want to make it flowlayout. When i reduce the resolution,the floating content container comes below the menu container. I want the content to float with a flowlayout without coming below the menu container.Please provide a solution to this.
Thanks!

Here is the link to the code.

http://jsfiddle.net/VdE7Y/

Answer by Scott

Remove the width and float from the #content css.

Set the background color of #wrapper to be whatever color you want the background of #content to be.

add display: inline-block; to the #content css.

Updated fiddle —-> HERE

Answer by Starx

The problem is the min-width you have for #menu-cont

The layout you are trying to have is very hard to maintain.

June 19, 2010

jQuery SlideDown and Float issuse

Question by DA.

I’m having an issue with jQuery slideDown when the contents of the object I’m sliding down is floated.

What happens is that that the div slides down WAY past the height of the contents, and then ‘snaps’ to the proper height.

I think (merely a theory) that the div is sliding down based on the height it would be if the contents inside weren’t floated. For instance, if I have 4 floated items, the div seems to expand twice as far than when I have 2 floated items within.

No amount of containing the floats with clearfix hacks seems to fix anything.

The solution I’ve used in the past (and one that is recommended) is to set the height of item via CSS BEFORE hiding it. That way, slidedown knows how far to go.

The catch is that I’m nesting panels that use slide down. I can’t set the height of the parent before hand as it would be calculated based on the nested hidden panels being expanded already.

I could recursively call that function that sets up all my toggle panels…find the innermost nested ones, set the height, collapse the ones I want hidden by default, and then move my way up the hierarchy. But that’d be a performance hit having to traverse so much.

Anyone know of a way to fix this slideDown of floated content without fixing the height via CSS before hand without having to traverse the dom setting heights manually first?

UPDATE:

sample code is here:

http://jsbin.com/ajoka/10/

(click the page to see it sliding)

This is based on the exact styles I am using and in that particular combination, you’ll see the issue. Note the DIV being set to slideDown has a pink background. It will slide down FURTHER than its contents and then quickly snap back into the proper place.

Answer by Starx

solved:

remove margin-bottom:10px; from your

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11

...

Please fill the form - I will response as fast as I can!