Member Avatar for Violet_82

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. Here is the link: http://antobbo.webspace.virginmedia.com/various_tests/floatProblem/test.htm
Look at the squares labelled 1,2,3,4 inside the red div. They are all floated left. Now, when 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 wracking 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

  • 4 Contributors
  • 9 Replies
  • 154 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by BMXDad
Member Avatar for Unimportant

One and two have fixed width,
which consume the entirety,
so it returns.

Member Avatar for Violet_82

sorry I am not sure I understand. What do you mean by "consume the entirety so it returns"?

Member Avatar for Unimportant 
    .mainWrapper{                <---------------------
    background-color:red;               entirety
    width:630px;            <-----------------------------------
    height:400px;
    }
Member Avatar for Violet_82

Oh I see, so it ='s because they take the whole width of the container. RIght, so what would be the best way to get this sorted? I mean, can it be sorted at all? the sizes (630px and 150px for the small containers) will have to stay the same unfortunately, the height of the mainWrapper can instead change if needed

Member Avatar for Unimportant

To have abstract height or abstract width, one of the two must be undefined.

Member Avatar for Unimportant

Pintrest for example has abstract height for images.
You can see a solution to the problem in this jQuery plugin Wookmark.

Edited by Unimportant
Member Avatar for iJimJones

The reason #3 drops down and creates an extra gap is because the lack of room for it to follow #2 causes it to naturally wrap and move leftward in such a way that it clears #2. If you had more than two boxes on the first row with different heights, you'd discover that the next box which wraps to the next line cannot move to the left and upward even though you could get it to wrap to some point that is not far to the left, depending on the box sizes on the first row. But your example is for two boxes per row, and it sounds like what you want are two independent columns of boxes.

One solution is to experiment with a left side div which contains #1 and #3 and a right side div which contains #2 and #4. That way you have independent floating behaviors in the different columns. You can place the left and right side columnar div elements inside of the mainwrapper.

Edited by iJimJones
Member Avatar for Violet_82

thanks for the explanation guys, really useful!

Member Avatar for BMXDad 
<!DOCTYPE html>
<html>
    <head>
        <title>Floating problem</title>
        <style type="text/css">
        .mainWrapper{
        background-color:red;
        max-width:630px;
        min-height:400px;
        padding:0;
        }
        .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;
        }
        </style>
    </head>
    <body>
        <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 style="clear:both;" />
        </div>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.