Layout Problem [Archive] - CodingForums.com

webguy08

08-03-2008, 06:14 PM

Hi all. I'm trying to get 3 blocks to line up horizontally using divs, however one of the blocks forms on a new line (the third [5px] block). The first block is 5px, the second is 840px and the third is 5px.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div class="mainbody" id="mainbody">
<div class="leftside" id="leftside"></div>
<div class="insidebody" id="insidebody"></div>
<div class="rightside" id="rightside"></div>
</div>
</body>
</html>

If you copy and paste this you should be able to see how it looks since there are no images in this.

Thank you for any help.

ninnypants

08-03-2008, 07:37 PM

I changed the width of your inside body class and they lined up.

.insidebody {
height: 500px;
width: 835px;
float: left;
}

You almost had the math right, the problem was that the full width is 850px, but the math to get there is "leftside width + leftside margin+ insidebody + insidebody margin + rightside + rightside margin + mainbody padding = 850px"
I would suggest that if you want to preserve the insidebody's width to just get rid of the inside div's margin

.leftside, .insidebody, .rightside{
margin:0;
}