View Full Version : CSS and Color in Negative Space

12-30-2006, 02:15 AM
Is is just me or is there something seriously wrong with layout in CSS. I have two columns side by side. One is longer than the other. So under the shorter column im left with white space because unlike tables the columns are not attached. So.... to fill in the white space i tried adding a color to the background of the main container div. that didn't work because apparently the container div does not stretch with the two columns nested inside it... unlike nested tables. i can try adding another div to that white space under the shorted column.... BUT....i would need to set the height to this new div. i tried this out and set the height to 100% so it would stretch to meet the end of the longer column.... but that didnt work which is understandable as the container div doesnt seem to have any height. AHHHHHHHHHHHHHHHHHHHHHH. what gives with CSS layout. do i need to set explicit heights for everything so my columns line up at the bottom ??? how does that acomodate dynamic content??
i searched around on google and this seem to be an issue with other designers.

Hope someone knows what im talking about. Kat

12-30-2006, 02:22 AM
No its likely you are using Firefox and you have at least one column floated therefore the containing element is collapsing because it thinks there is no content. If you are unsure what I'm talking about then post a link to your page or post your css and your html. Link is prefered.

12-30-2006, 02:22 AM
Hi kattie,
you're on the right track by putting a color in the background div - that technique is called Faux Columns. Google that and you'll see a lot of examples.
If the color still doesn't go all the way down then you need to clear your floats.

Have a look at http://www.positioniseverything.net/easyclearing.html to see how to do that.

If you need more help, post your code and someone will be glad to show you how to do it.

Congratulations on making the effort to move away from tables!!!

12-30-2006, 04:06 PM
ahh im so stupid. i use clearing divs all the time but i didnt know that was part of their function. everything looks good now so thank you very much.

yes im starting the really enjoy the hands on approach of css. apart from all the other benefits you also really get to know your code since GUI programs like dreamweaver dont work well with CSS. to use css for layout you really have to use your imagination and visualise what you want... then translate this into boxes. you end up with a deeper understanding of how you site is build. i hope GUI programs take their time in catching up.
i have some friend that still use tables and its very had to explain to them why css is easier even without a development GUI. anyway... what better GUI than a refreshed browser ;0)