ansaurus

Question

css two column layout with footer - part of right column is placed below left column

Answer 1

+1 A:

[deleted my bullet points - it's best demonstrated in html!]

Here's an html snippet that you can adapt to fit as required:

<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>

I've given the divs different heights just to demonstrate the effect of the clear div forcing the footer to be pushed down.

Andras Zoltan 2010-01-15 08:25:13

Thanks, i tried first your 4 bullets. Actually the problem would be gone, but now the right colum is floated to the right. All the content of the right column is now on the right end of the page. This is not what I wanted to achieve. Did I make something wrong?

Tom Tom 2010-01-15 08:44:20

No you didn't do anything wrong! You have a couple of choices here, you can either float:left the right column as well (so both DIVs stack up on the left of each other); or you can place both DIVs inside another DIV container that you give an explicit width too. Float:left * 2 might be your best bet. I've updated the example and answer to demonstrate.

Andras Zoltan 2010-01-15 08:50:37

Just that you see the result for the first try: http://mocaso.vs120027.hl-users.com/website/v2/ContactFilter.htm

Tom Tom 2010-01-15 08:56:28

With your actual example. I will try it out in a minute. But don't you think I will get the same problem with content of the right column will be placed below the left column if the left column is "over"?.

Tom Tom 2010-01-15 08:59:48

i suggest you attach a dummy screen shot about what you want to do?

joetsuihk 2010-01-15 09:03:22

Please see http://mocaso.vs120027.hl-users.com/website/Contact%20Filter.htm . This is actually what I want to do, but without the bug that the content of the right will be placed below the left content when the right columns grows in size.

Tom Tom 2010-01-15 09:05:39

@Andras Zoltan: Your example code works, even when the content of the column on the right grows in size. I think I will try to clean up my stuff and implement as you suggested. Could last some hours ;-) I'm wondering whats wrong in my code.

Tom Tom 2010-01-15 09:11:00

Ok maybe it does not work for the purpose that I have. See http://mocaso.vs120027.hl-users.com/website/v3/testcss.html If you shrink the browser the right div is placed below the left div. This is not what should happen.

Tom Tom 2010-01-15 09:42:25

I see what you mean - I'll hack about and update the example.

Andras Zoltan 2010-01-15 09:49:21

Thanks a lotfor your effort!

Tom Tom 2010-01-15 09:57:47

No probs - Please see updated answer - if you don't float the right column at all, and set overflow:hidden, then it automatically fills the contents of the <i>new</i> containing DIV; because it's not floated, either, the browser won't reposition when things get too small. I've also put a min-width on the containing div to show how you can prevent nasty edge cases in layout caused by the user reducing the size of the browser. However - you are undoubtedly going to get evils from certain browsers!

Andras Zoltan 2010-01-15 09:57:53

That seems to work :D What do you mean with "you are undoubtedly going to get evils from certain browsers". I tried this solution in firefox, ie6 and chrome. Seems to work in all of them. I'm not a native speaker.

Tom Tom 2010-01-15 10:09:02

Do you think the overflow:hidden is a problem for certain browsers?

Tom Tom 2010-01-15 10:10:14

because, when it comes to web pages and CSS etc, I always expect the worst - so many situations where I've been left angry by different browsers' reactions to my markup! However, if it works in those three; it looks like we might have a solution :)

Andras Zoltan 2010-01-15 10:18:29

:D haha.. yeah you are right. Same thing here. I started to expect the worst. Often I m like "yeeess. great..i found a solution" and after two seconds "ooooh nooo" ;-) Anyway.. thanks a lot for your help! I really appreciate it. Especially since I'm dealing with this topic now for days and now I can fully enjoy the weekend without headache.

Tom Tom 2010-01-15 10:28:41

no probs - enjoy the weekend :D

Andras Zoltan 2010-01-15 11:44:00

Answer 2

A:

please state your browser and version number when you ask CSS questions.

i think the problem happens in IE6? declare the right column float left, while add an empty div with clear:both after right column div.

<div class="left-col">abc</div>
<div class="right-col">def</div>
<div style="clear:both;"></div>

there is some more things you need to know, IE6 do not support min-height, use height instead or do not declare height at all.

Welcome to the IE6 hell.

joetsuihk 2010-01-15 08:38:52

Next time I will. But for this case the problem does occur in each browser. So I can not blame the beast (IE6)!

Tom Tom 2010-01-15 08:41:17

ansaurus

tags:

views:

answers:

css two column layout with footer - part of right column is placed below left column

related questions