Simple CSS Trick

At best I’m a CSS hacker, but every now and then, I actually learn something cool about CSS.  Today, I finally figured out how to make a dynamically expanding div container.

Basically I have a ‘mainContent’ div container where the height is unknown based on the content (additionally, I have a floating div).  In order to dynamically grow the content div I use this style:

#mainContent {
	border: 1px solid #000000;
	overflow: hidden;
	width: 100%;
}

div.left {
	width: 45%;
	float: left;
}

div.right {
	width: 45%;
	float: right;
}

 

The key here is the ‘overflow: hidden’  on the “container” div (id is mainContent).  This works well both in Firefox and IE (7, not sure about 6)

Probably everyone knows this already, but figured I’d share  🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s