homepage Welcome to WebmasterWorld Guest from 23.20.34.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Expanding a container with content
SeK612




msg:1191846
 11:59 am on Sep 1, 2005 (gmt 0)

I've tried looking around for a solution on these forums but haven't had any luck so far.

I'm creating a basic layout in CSS. I've managed so far but am struggling to set up columns with a border.

There are two columns on the page and a third which encases these two (acting as a table would do).

This outer container has a border assigned, however it doesn't appear when viewed as it doesn't seem to pick up on the content held there and so remains as a thin line at above the two columns.

A temporary solution is to assign a height value to the container which forces it down the page. This isn't practical though as it leaves a lot of white space if the content of the columns is small and doesn't expand if the content is large.

The outer container's border does seem to work in Internet Explorer. The problem is present when viewing in Firefox.

 

createErrorMsg




msg:1191847
 1:25 pm on Sep 1, 2005 (gmt 0)

The outer container's border does seem to work in Internet Explorer. The problem is present when viewing in Firefox.

I assume from your description that one or more of your columns are floated elements. When an element is floated it is removed from the document flow. This means that it can no longer interact with other elements, including having an influence over the height of its parent element. Basically, a container with only floated child elements doesn't know it has anything in it at all, and so it snaps it's borders and background shut.

IE has an autoenclosing behavior which overrides this part of the specs, which is why the border shows up in that browser. To get FF to mimic that behavior, there are several options.

The easiest is to add a float property to the container. A floated parent will expand to contain it's floated children.

If, however, this causes other problems with your layout, you can add a "clearing element," most commonly a <br style="clear:both;" />, to the END of the container (just before the container's closing tag).

Another option is Clearing a float with structural markup [positioniseverything.net].

Yet another option (although a possibly unstable one) is setting the overflow property on the parent to auto (see this thread [webmasterworld.com]).

Options abound. Pick the one that best suits your needs and your fancy.

cEM

SeK612




msg:1191848
 2:00 pm on Sep 1, 2005 (gmt 0)

Thanks :), <br style="clear:both;" /> just before the end tag of the container worked great. As you said assigning a float value to the container made the border visible but knocked out the alignment, which was to the center of the page.

createErrorMsg




msg:1191849
 2:07 pm on Sep 1, 2005 (gmt 0)

knocked out the alignment, which was to the center of the page

That can be fixed by wrapping the container in a wrapper div, and using that wrapper div for nothing but centering (width and auto margins on the wrapper, text-align:center on the wrapper's parent). However, if you're happy with a clearing element, there's no need!

cEM

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved