Welcome to WebmasterWorld Guest from 50.19.135.67

Forum Moderators: not2easy

Message Too Old, No Replies

Expanding a container with content

     

SeK612

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month