Power By 专否社区

Trouble Floating Divs Correctly

Go To StackoverFlow.com

0

My divs are displaying a staircase effect, as shown below. Usually in tables you can use vertical-align: top, not sure how to do this for divs.

 ____1_____     
            _____2_____      
                        ______3_____

The CSS I have so far is:

   .areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto; 
width:130px;
padding:5px;
}

The HTML is:

<div>
<div class="areadiv">
content
</div>
</div>
2012-04-04 23:21
by Keezy
http://jsfiddle.net/pZEau/ ??? - jacktheripper 2012-04-04 23:23
show your html as well - David Nguyen 2012-04-04 23:28
sorry, it is
content
Keezy 2012-04-04 23:35

0

Your CSS doesn't make so much sense with the layout you're are trying to achieve, it should be:

.areadiv {
  float: left;
  display: block;
  width: 130px;
  padding: 5px;
}

The margin: 0 auto; is used for centering container divs and you don't need the inline-block.

2012-04-04 23:31
by bartolsthoorn
I had tried that but no change. I added the margin and height after I tried tha - Keezy 2012-04-04 23:41
Please post your HTML, you seem to want 3 divs that sit next to each other, so you need to have at least 3 times <div class="areadiv">bartolsthoorn 2012-04-04 23:44
It does work, see: http://jsfiddle.net/R3HhM - bartolsthoorn 2012-04-04 23:46
there is only three divs right now but there will eventually be more than three. the divs are states, then under the states are cities. so eventually there will be 50 divs total on the page. not sure if that makes sense - Keezy 2012-04-05 00:02

1

I'm with @bartolsthoorn that your CSS is quite confusing. But rather than using float I'd use only display: inline-block. And when you use inline-block you have to remember to set vertical-align as well as most (all?) browsers default to middle: 

.areadiv {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

That's all you need.

2012-04-04 23:48
by powerbuoy
If you do this, you need to set display:inline for IE7 and lower, if you support them - Beth Budwig 2012-04-05 00:09

1

Ok firstly the width of the containing div must be set = or > than the combined widths of the floats, that's how it knows to move on to the next line.

For example..

.areadiv 
{
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

.containerdiv 
{
    width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}

And the HTML:

<div class="containerdiv">
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
</div>
2012-04-05 00:04
by Jay Croghan
Ads