I am trying to implement the Faux Columns idea, and I'm having some issues in certain browsers- namely Netscape 7+, Mozilla for Mac, etc. I have 1 container ('main') with 2 columns inside, floated left ('sidebar' and 'content') with a cleared div under that to reset everything. I set a column-like background image for 'main' and everything looks great- then when I add in the 2 floated columns, the background image in main disappears completely (and so do the columns!) ??? Here is the code:
[CODE]<div id="container">
<div id="header"></div>
<div id="main"> <div id="sidebar"> menu here </div> <div id="content"> <h1>page title here</h1> </div> <div class="break"></div> </div>
If anyone can help, I'd really appreciate it! This is driving me batty... I have to be able to have 2 columns of the same height going down the page, and I DO NOT want to have to switch to a table layout! eek!
@toicontienJun 23.2006 — #The .break DIV needs some content in it most likely. If your site has a footer to it, the footer itself is the perfect clearing element. Get rid of .break, move footer inside main and give the footer DIV the clear: both style.