...

View Full Version : 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">
<!--
.bigbox {
width:800px;
border:5px solid #f2f2f2;
padding:5px;
display:block
}

.smallleftbox {
float:left;
padding:5px;
width:500px;
background-color:#0000FF;
}

.smallrightbox {
float:left;
padding:5px;
width:140px;
background-color:#FF0000;
}

-->
</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum