Boxes Within Boxes

billatl

11-16-2009, 11:45 PM

Hello,

Trying to place two DIV boxes inside of another - but the two boxes will not stay within the large wrapper - except for IE (a first). The code validates in Dreamweaver but does not display correctly. What's wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

</style>
</head>
<body>
<div class="bigbox">
<div class="smallleftbox">test1</div>
<div class="smallrightbox">test2</div>
</div>

drhowarddrfine

11-17-2009, 12:15 AM

Parent elements are NEVER to expand to contain floated elements. What you see IE doing is a bug. Other browsers are performing correctly.

To get other more modern browsers to imitate IEs bug, either add 'overflow:auto' to the parent or float the container itself.

Excavator

11-17-2009, 04:22 PM

Hello billatl,
Just a couple changes makes that code valid, see -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bigbox {
width: 800px;
border: 5px solid #f2f2f2;
padding:5px;
overflow: auto;
}
.smallleftbox {
float: left;
padding: 5px;
width: 500px;
background: #0000FF;
}
.smallrightbox {
float: left;
padding: 5px;
width: 140px;
background: #FF0000;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="smallleftbox">test1</div>
<div class="smallrightbox">test2</div>
</div>
</body>
</html>

Have a look at this site which explains what overflow: auto; is doing (http://www.quirksmode.org/css/clearing.html).

.

billatl

11-17-2009, 04:30 PM

Thanks, that worked - though I used Hidden do to some unwanted scrollbars

Excavator

11-17-2009, 05:23 PM

Thanks, that worked - though I used Hidden do to some unwanted scrollbars

The appearance of scrollbars might indicate that your box model (http://www.w3.org/TR/CSS2/box.html)is off.
overflow:hidden; may not be the best way to control that.