Sigh.

**Nick** · May 16, 2004 12:58

I can't believe I can't figure this out, it seems so easy

I've read all the tutorials and stuff, but maybe i'm just stupid, it isn't working. I want to place one div beside another div, not using absolute positioning. Here is what I have - the right div though is going right, but under the left div.

Code:

#container {
	width: 679px;
	padding: 0; }

#left {
	width: 485px;
	background-color: #8CA5AF;
	border-left: 3px solid #71858D; }

#right {
	float: right;
	width: 190px;
	background-color: #7F969F;
	font: 11px verdana;
	color: 202E34; }

Can someone please help me? I've tried some other stuff I have taken out now, none of it worked.

**Paul O'B** · May 16, 2004 13:14

Hi,

IE adds extra padding around floats which can stop them fitting into the space you've allocated. Looking at your layout theeasiest solution would be to float both the left and right and the problem goes away.

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
 width: 679px;
 padding: 0; }
#left {
 float:left;
 width: 485px;
 background-color: #8CA5AF;
 border-left: 3px solid #71858D; }
#right {
 float: right;
 width: 190px;
 background-color: #7F969F;
 font: 11px verdana;
 color: 202E34;
}
</style>
</head>
<body>
<div id="container"> 
  <div id="right">Right</div>
  <div id="left">Left</div>
</div>
</body>
</html>

Alternatively allow a little more space for the floats to fit or use a hack to reduce the right margin on the float.

Code:

* html #right {margin-right:-3px}

The first solution would seem the best in this case.

Paul

**Nick** · May 16, 2004 14:43

Thanks!

User Tag List

Thread: Sigh.

Thread Tools

Display

Sigh.

Bookmarks

Bookmarks

Posting Permissions