Containing Divs within a Parent Div

smooth · Sep 25, 2008

Hi everybody

I have a simple example html page to test this with:

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="width: 100%; float: left;border:1px solid #000000;">
	<div style="float: left; width: 185px;border:1px solid red;">left</div>
	<div style="float: left; width: 790px;border:1px solid blue;margin:auto;">center</div>
	<div style="float: left; width: 185px;border:1px solid green;">right</div>
</div> 

</body>
</html>

Now, if you run this page, you'll see that everything is lined up pretty well, but when make the browser thinner, the center div ends up going outside of it's container div.

I was wondering is there a way to keep fixed width divs within their container?

Any help is greatly appreciated

tomdkat · Sep 25, 2008

smooth said:
I was wondering is there a way to keep fixed width divs within their container?

There sure is. Make sure the fixed width DIV is contained within a DIV that is guaranteed to be as wide as the fixed width DIV.

You could use the min-width CSS attribute to control the width of the parent DIV (so it won't be more narrow than the fixed width child DIV) but IE doesn't support min-width (at least pre-IE8 versions don't and I don't know about IE8). *Sigh*

Peace...

colinsp · Sep 26, 2008

I know pre IE8 browsers that don't support min-height actually treat height as a minimum so maybe they do the same for width? Worth a try with some IE specific CSS?

Containing Divs within a Parent Div

smooth

tomdkat

Retired Trusted Advisor

colinsp

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Welcome to Tech Support Guy!

Latest posts

Members online