Hi,

I'm trying to create a two column layout with a footer. The problem that I have with my current solution is that the content of the right column is placed below the left column when the right column grows in size:

Please see this http://mocaso.vs120027.hl-users.com/website/Contact%20Filter.htm for a working example of what happens.

In the stackoverflow Q&A page I got already some comments. With their comments I created the next example which helped me to get rid of the anoying problem that content of the right div is placed below the left div.

Now the problem for me is, that if I do it like suggested on stackoverflow and I shrink the browser, the whole right div is placed below the left div.

Please see the example online: [http://mocaso.vs120027.hl-users.com/website/v3/testcss.html] (link)

For me this is a tough problem. More a business logic guy than a designer. For experienced designers it should be a matter of minutes. The problem occurs in any browser.

Would appreciate any help!

3 answers

1
point
This was chosen as the best answer

Try to float the right column to the right, to avoid float-dropping (which you are experiencing now :) ). The DIVs need not touch each other:

Try this mockup in a document:

CSS:

body {
    width: 900px;
    margin: 0 auto; 
}

#left {
    float: left;
    height: 600px;
    background: #CCCCCC;
    width: 440px;
}
#right {
    float: right;
    height: 600px;
    background: #CCCCCC;
    width: 440px;
}

HTML:

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

<div id="right">Right</div>

The mockup can be found here as well.

When using floats you'll have to be mindfull in what order the elements are in the source code. In this case, the div#left tries to stack horisontally, and leave space to the right for any element. And div#right in this case finds that it is allowed to lie beside the div#left (there is actually 460 px left), so that is what it does. Not only that both div#left and div#right tries to lie as far to the left/right as they can, creating the gap of 20 px between the divs.

You can do this with fluid widths as well.

In a way when using floats you are trying to stack the elements horizontally rather then vertically but in the same order as in the source code.

Answered almost 7 years ago by Jens Hedqvist
1
point

Thanks. I think I got now a solution on stackoverflow.

<body> 
<div style="min-width:400px;">
<div style="float:left; background:red;height:200px; width:200px;">left column</div> 
<div style="overflow:hidden; height:300px; background:blue; color:white;">right column</div> 
<div style="clear:both">&nbsp;</div> 
<div style="background:black;color:white">footer</div> 
</div>
</body> 

The first proposal on SO was also to right:float. Then I tried it and the result was this:

http://mocaso.vs120027.hl-users.com/website/v2/ContactFilter.htm

But I think without floating and overflow:hidden (like posted above) I get rid of the problem. What do you think. Is this an approach that could work in all browsers. I tested it in ie, firefox and chrome. Seems to work.

But why is the right column div placed right of the left column? Actually that is exactly what I wanted to achieve. But why is it not placed below the left column? I try to understand the code I posted above.

Answered almost 7 years ago by Thomas K
  • I've updated my answer with an explanation about the floats. Please feel free to ask if you have any more questions, but do so through the "Add comment" link on my answer :) Jens Hedqvist almost 7 years ago
  • Ok, I think I got the idea how floating divs work. I try now to explain why this source behaves the way I want. "left columns" is floated left and tries to leave space open for "right column". The thing that I do not understand is the "overflow:hidden". By definition this statement do this: "The overflow is clipped, and the rest of the content will be invisible" . For my use-case it prevents to show parts of the right column in the left column if the right column is growing in height, which was my initial problem. Thus overflow:hidden does the trick here. But the question is: "why" ? Since it does not only hide the overflow, it does also place all the stuff in the right column where it should be.. Thomas K almost 7 years ago
0
points

Please follow this link to the original discussion on stackoverflow. Sorry for not editing my post above, but I'm not allowed to edit posts. Seems that this is not possible with a reputation of 0. http://stackoverflow.com/questions/2070215/css-two-column-layout-with-footer-part-of-right-column-is-placed-below-left-col

Answered almost 7 years ago by Thomas K