Two Column Layout Not Working

[dnpeterson]

I am TRYING to make a two column layout, with the main content on the left and the secondary, small list on the right.

What happens (with every way that I've tried it so far) is that when the right side doesn't have enough content to be long enough for the left side, the column doesn't go all the way down, and the different colors show. It is extremely irritating, and if somebody could help me fix this, that would be FANTASTIC!

What is going wrong:
http://img294.imageshack.us/img294/6762/examplexg.png

 

[smoovo]

Don't panic... Here is your solution .

1. You need div that contains the both columns, we'll call it "container".
2. Inside the container we have 2 divs. One called "l_column" the second "r_column".
3. Last div will clear the float settings for the content that will come after.

The code:

<div id="page">
    <div class="l_column">Your left column content here.</div>
    <div class="r_column">Your right column content here.</div>
    <div class="clear"></div>
</div>

5. Style the divs with their properties.

The code:

#page {
	width:700px; 
	overflow:hidden;
}

#page div {
	margin-bottom:-1000px; 
	padding-bottom:1000px;
}

.l_column {
	float:left; 
	width:500px; 
	background:#333;
}

.r_column {
	float:right; 
	width:200px; 
	background:#777;
}

.clear {
	clear:both;
        height:1px;
        overflow:hidden;
}

Explanation:
The inside divs will get longer height and then will be minimized back to trick the shorter div. The container will be set as "overflow:hidden" to hide the unused space from both columns, but, with respect to the longer one.

You should change the width to your real used sizes in your page. Other styles for your content will be added to these divs.

You can see example at my website - Demo.

- Enjoy.

 

[PixelPusher]

Don't panic... Here is your solution .

1. You need div that contains the both columns, we'll call it "container".
2. Inside the container we have 2 divs. One called "l_column" the second "r_column".
3. Last div will clear the float settings for the content that will come after.

The code:

<div id="page">
    <div class="l_column">Your left column content here.</div>
    <div class="r_column">Your right column content here.</div>
    <div class="clear"></div>
</div>

...

Using a empty div to clear floats is bad practice. Just add this to the float containing element:

overflow:hidden;

 

[smoovo]

Using a empty div to clear floats is bad practice. Just add this to the float containing element:

overflow:hidden;

Clear divs are very common, and i fixed the IE divs problem.

 

[LouTheDesigner]

Clear divs are very common, and i fixed the IE divs problem.

There are many things that web designers commonly do that they ought not do. Empty divs will necessitate more code to be loaded, and for more code to be sorted through when making updates.

-Lou

 

[bcee]

I have been using <br clear="all" /> for the most part. I will have to give this a try.

 

[smoovo]

Thanks for the advise. I will read more about it at the W3C and i will re-post, maybe I'm wrong and it's better not to use it .

Thank you.

 

[PixelPusher]

Clear divs are very common, and i fixed the IE divs problem.

Just because it is common, does not mean it is correct. I understand it fixed the issue, but its a hack. I am trying to help you learn/understand the correct method.

 

[PixelPusher]

There are many things that web designers commonly do that they ought not do. Empty divs will necessitate more code to be loaded, and for more code to be sorted through when making updates.

-Lou

Exactly right Lou.

 

[PixelPusher]

Thanks for the advise. I will read more about it at the W3C and i will re-post, maybe I'm wrong and it's better not to use it .

Thank you.

Np your welcome.

 

[smoovo]

I looked online, my books... Nothing about bad using of empty Divs. I think that if someone knows any reason of why it's bad and not correct to use empty Divs they should post it. Just to say something without bringing any real reason doesn't count.

Thank you again.

 

[PixelPusher]

Semantics my friend, semantics.

 

[smoovo]

S u r e . . .

 

[bcee]

I looked online, my books... Nothing about bad using of empty Divs. I think that if someone knows any reason of why it's bad and not correct to use empty Divs they should post it. Just to say something without bringing any real reason doesn't count.

Thank you again.

I doubt you will find anything about it being bad. I think the argument here is just extra markup and css classes vs a simple css property.

 

[PixelPusher]

I doubt you will find anything about it being bad. I think the argument here is just extra markup and css classes vs a simple css property.

Precisely Brad.