Aligning 2 divs with the 1 div above

**BLaaaaaaaaaarche** · BLaaaaaaaaaarche, June 25th, 2009 03:29 PM

Try this:

Code:

body {margin: 0;}
#clear {clear: both;}
#container {
	width: 100%;
	padding: 0;
	margin: 0;
}
#left {
	width: 90%;
	float: left;
}
#right {
	width: 10%;
	float: right;
}
#head-content {
	margin: 0;
	padding: 5px 3px;
	border: 1px solid #336799;
}
#left-menu {
	width: 17%;
	margin: 0;
	padding: 0;
	float: left;
}
#left-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#left-menu ul li {
	cursor: pointer;
	margin: 0;
	padding: 2px;
	background-color: #BBCCDC;
	border-bottom: 1px solid #FFFFFF;
}
#left-menu ul li:hover {background-color:#B1B3FF;}
#left-menu ul li a {
	width: 100%;
	text-decoration: none;
}
#main-container {
	width: 83%;
	margin: 0;
	padding: 0;
	float: left;
}
#main-content {
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
	border: 1px solid #336799;
}

And the HTML:

Code:

<html>
<head>
<title>richyrich</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="container">
    <div id="left">
      <div id="head-content">Head Content</div>

      <div id="left-menu">
	<ul>
	  <li class="blue336799_8"><a href="#">Customers</a></li>
 	  <li class="blue336799_8"><a href="#">Tasks</a></li>
	</ul>
      </div>

      <div id="main-container">
	<div id="main-content">Main Content</div>
      </div>

      <div id="clear"></div>
    </div>

    <div id="right">Right Feed</div>
  </div>

</body>
</html>

**richyrich** · richyrich, June 26th, 2009 03:48 AM

OK. I removed the float and added an overflow:hidden property to the Main Content div, changed the left menu to a fixed width and that seemed to sort it...

**BLaaaaaaaaaarche** · BLaaaaaaaaaarche, June 26th, 2009 07:46 AM

Originally Posted by richyrich

OK. I removed the float and added an overflow:hidden property to the Main Content div, changed the left menu to a fixed width and that seemed to sort it...

So my code didn't work? It worked perfectly in IE and FF.

**richyrich** · richyrich, June 26th, 2009 08:13 AM

Originally Posted by BLaaaaaaaaaarche

So my code didn't work? It worked perfectly in IE and FF.

Yep. Just tried it and it does the job....Thanks...

**BLaaaaaaaaaarche** · BLaaaaaaaaaarche, June 26th, 2009 09:17 AM

Originally Posted by richyrich

Yep. Just tried it and it does the job....Thanks...

You can also adjust the margin by chaging it in the container div or in the body div. That is, if you don't want the page to be spanned across 100% of the window.

Thread: Aligning 2 divs with the 1 div above

LinkBack

Thread Tools

Display

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions