1. Home
  2. Forums Index
  3. Browser Side / CSS 11:17 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

floating divs problem

         

dupalo

11:22 pm on Jul 19, 2013 (gmt 0)

10+ Year Member



Chaps, I have run into some strange behaviour never seen it before, and it is really giving me a huge headache. I wonder if anybody can help me to understand why this is happening.

Basically I have 4 floated left divs, in this order:1,2,3,4: 1 and 2 are at the top and 3 and 4 below them. I increase the height of div 2 (you could do that in firebug) you will notice that, as you expect, div 4 will be pushed down. But also div 3 is pushed down!? And I have been racking my brain for hours today trying to understand why that happens. Needless to say I don't want it to happen, I only want the container just below the one whose height I have increased to be pushed down. Is it something stupid I am doing or have I run into some kind of floating bug?
There are a couple of things I should mentioned. I have tried to achieve the same result with positioning (absolute etc) but the problem is that divs 1 and 2 will contain text and therefore need to grow and shrinks and obviously with absolute positionoing you have to specify a height etc etc, so I would like to stick to
floating divs if it is ok.
So let's look at the relevant code: 

<h2>Floating problem</h2>
 <div class="mainWrapper">
  <div class="one"><p>1</p></div>
  <div class="two"><p>2</p></div>
  <div class="three">
   <p>3</p>
  </div>
  <div class="four">
   <p>4</p>
  </div>
 </div>


.mainWrapper{
 background-color:red;
 width:630px;
 height:400px;
}
.one{
 width:310px;
 height:120px;
 background-color:magenta;
 float:left; 
 margin-bottom:10px;
}
.two{
 width:310px;
 height:120px;
 background-color:magenta;
 float:left; 
}
.three, .four{
 width:310px;
 height:150px;
 background-color:yellow;
 float:left;
}
.three{
 margin-right:10px;
}
/* .subThree1{
 width:150px;
 height:150px;
 background-color:black;
} */
.one{
 margin-right:10px; 
}
Any help will be much appreciated!
thanks

[edited by: DrDoc at 2:05 am (utc) on Jul 20, 2013]
[edit reason] Link. See forum charter [webmasterworld.com] [/edit]

lucy24

2:16 am on Jul 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What _I_ can't figure out is why, if you remove the width constraint on the wrapper and widen the window, float 4 ends up under float 3 instead of under float 1-- and now there's no intervening vertical space.

The 3 vs. 4 issue is a red herring. If you remove one of the two-- or simply set it to {display: none;} the survivor is still dropped down to line up with the bottom of 2, even though there is now nothing under 2. This remains true even if you make 3 and 4 narrower than 1 and 2.

I think the principle is that, once a float has been bumped down to a second line, it can't start before the first row of floats have ended. That is, it only floats from side to side, not from top to bottom.

If you want 3 to align with the bottom of 1, and 4 to align with the bottom of 2, wouldn't it be more likely to work as intended if you made two side-by-side divs set to {display: inline-block}? One for the current 1 and 3, the other for 2 and 4.

Paul_o_b

11:49 am on Jul 20, 2013 (gmt 0)

10+ Year Member



Hi,

If you refer to the w3c specs 9.5 floats then the very first words say:


A float is a box that is shifted to the left or right on the current line.


That means that a float can never rise up past the top edge of an adjacent float (when it is floated in the same direction) because it is only shifted left or right. It does not get moved up (unless one is floated left and the other is floated right).

However, although it may seem that floating left and right is an answer to your problem it would only work if the boxes in one column were always larger than those in the other column.

e.g.

Like this: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
width:590px;
margin:auto;
overflow:hidden;
background:red;
}
.fl {
float:left;
width:280px;
margin:5px;
height:100px;
background:yellow;
}
.even {
float:right;
height:120px;
background:magenta;
}
</style>
</head>

<body>
<div class="outer">
<div class="fl ">1</div>
<div class="fl even">2</div>
<div class="fl">3</div>
<div class="fl even">4</div>
<div class="fl">5</div>
<div class="fl even">6</div>
<div class="fl">7</div>
<div class="fl even">8</div>
</div>
</body>
</html>


That appears to do what you want, however if one of the boxes in the right column was smaller then the whole thing breaks.

e.g. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
width:590px;
margin:auto;
overflow:hidden;
background:red;
}
.fl {
float:left;
width:280px;
margin:5px;
height:100px;
background:yellow;
}
.even {
float:right;
height:120px;
background:magenta;
}
.small { height:20px }
</style>
</head>

<body>
<div class="outer">
<div class="fl ">1</div>
<div class="fl even">2</div>
<div class="fl">3</div>
<div class="fl even small">4</div>
<div class="fl">5</div>
<div class="fl even">6</div>
<div class="fl">7</div>
<div class="fl even">8</div>
</div>
</body>
</html>



Unfortunately it is therefore impossible to float (auto height) subsequent floats left and right and have them appear to fill columns. You would instead need to float two columns only and stack the elements individually in each column but of course would not retain an original sequence.

lucy24

1:32 pm on Jul 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What _I_ can't figure out is why, if you remove the width constraint on the wrapper and widen the window, float 4 ends up under float 3 instead of under float 1-- and now there's no intervening vertical space.

Belated "D'oh!" moment as I figure out that it's precisely the extra height of #2 that makes this happen. #4 on a line by itself can't go any further to the left, because it starts out in line with #3 and therefore is blocked by #2.

It is easier to see in action if you make all four of them different colors ;)

dupalo

5:50 pm on Jul 20, 2013 (gmt 0)

10+ Year Member



uhm, so you're saying that if all of them have the same height, that won't happen? I have tried that already but it still doesn't work

dupalo

8:40 pm on Jul 20, 2013 (gmt 0)

10+ Year Member



thanks lucy24, I thinkyou put me on the right path. I have enclosed div 2 and 4 in the same div but then I had to position the div absolutely and everything works even if like I aid at the beginning I am not keen on absolute positioning. The trouble is that in tablet version div 3's width is reduced to 150px and sit next to div 4 (whose width is reduced to 150 too) and I think that is impossible to achieve if I enclose 2 and 4 in the same div

JD_Toims

11:29 pm on Jul 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Is there a reason you can't use jQuery to change the page?

If you can use it then there's a ton of workarounds to the issues you're having. You can:

A.) Put the content in the div's then "grab the top div heights" and adjust the margin-top on the bottom one(s) to move them up.

B.) Put the <div>s where you want them so they display correctly then change their contents so they read in the correct order or are in the correct order for size even if they don't load in that order initially.

C.) A bunch more I could think of if I had to...

lucy24

1:44 am on Jul 21, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Option B-- or are we on option D now?-- is to go back to the beginning and look at your four elements. What is the relationship among them? What order should they display in? If the viewport has room to display all four side by side, would you want it to? Conversely, if there isn't room for all four in a row, what configuration do you want?

If you're making the site responsive, you've got options besides simply changing the width of an element. You can also toggle among display options like {table-cell} vs. {inline-block} vs. {block} based on viewport width.

The underlying theme is: First figure out what you want to do in human terms. Then write code to make that happen.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:17 am May 1, 2026