Equal columns

[rflanagan]

I am relatively new to web development. I have read numerous posts about equal columns and having to use background images to make it appear like they are the same size. I don’t do it that way and I wanted to see if anyone could give me any ideas on if this is a bad way to do it.

Let’s say you have a structure with a header, mainContent, sideBar, and a footer.

I have been wrapping everything in a container div to center the document and using a reset stylesheet to get rid of all padding and margins.

Then I would have a header div, a content wrapping div set to overflow: hidden, then inside of it have my mainContent and sideBar div set to float: left & right. By doing this all of my content appears to be the same size and it forces my footer to the bottom. I just wanted to see what everybody thought about this way of accomplishing equal columns.

Thanks.

[AshtonSanders]

hmmm… That sounds like the normal way to get a two column layout… Does your sidebar and main content have the same background (color, img, etc)?

If they whole background is white, then it doesn’t matter if the sidebar reaches the bottom… Do you have a link?

[rflanagan]

No, I don’t have a particular link that is just the way I do a lot of my projects. If my sideBar is a different color I can still apply a color to it and have the same length as my mainContent because they are in serperate div’s. Basically my main concern was if I was using too many div’s, after reading about "divitis" I wanted to make sure I wasn’t doing any overkill.

If I were to have a header, sideBar, mainContent, advertisements, and a footer I would apply the same style.

It would look like this

<div id="container">

<div id="header">

<–content–>

</div><!–end header–>

<div id="contentArea">

<div id="sideBar">

</div><!–end sideBar–>

<div id="mainContent">

</div><!–end mainContent–>

<div id="advertBar">

</div><!–end advertBar–>

</div><!–end contentArea–>

<div id="footer">

</div><!–end footer–>

</div><!–end container–>

with this code I would apply auto margins to the container and set a width.

#contentArea overflow: hidden

#sideBar float: left width: 20%

#mainContent float: left width: 60%

#advertBar float: right width: 20%

The percentages are just place holders, again I just wanted to see if this is too much to accomplish a design.

[apostrophe]

Very rarely in CSS is there a right way to achieve a desired layout, everybody has their own preferences and methods. If it works in all browsers and you are happy with it then don’t worry about it. :D

[AshtonSanders]

"rflanagan" wrote:

If my sideBar is a different color I can still apply a color to it and have the same length as my mainContent because they are in serperate div’s.

What I think you may be missing is the height issue.

Example: If you have 3 lines of text in your side bar and 6 lines of text in your main content. If you assign a background color to the sidebar the background color will only be behind the 3 lines of text; leaving white space below the sidebar… right?

They Height of the two divs are the difficult part to keep the same (although you probably could do that with absolute positioning…)

Actually, I was just fiddling with a slightly different way for a new site (WIP) of mine. Since the main content will always be the longest part of the page (knocks on wood) (and everything is elastic), I made the Containing div have the sidebar color and the main content have a white bg: http://cssvideos.com

"rflanagan" wrote:

Basically my main concern was if I was using too many div’s, after reading about "divitis" I wanted to make sure I wasn’t doing any overkill.

I guess I have divitis… and my websites have extremely clean and simple HTML/CSS… good thing you can’t die from divitis.

[Author]

Posts