+ Reply to Thread
Page 2 of 2 FirstFirst 1 2
Results 11 to 15 of 15

Thread: Aligning 2 divs with the 1 div above

  1. #11
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    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>
    
    Last edited by BLaaaaaaaaaarche; June 25th, 2009 at 03:38 PM. Reason: Added link BG color change properties. Also, made entire link box clickable.
    "You'll never be as perfect as BLaaaaaaaaarche."

  2. #12
    Administrator richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich's Avatar
    Join Date
    Mar 2008
    Location
    Somewhere only we know...
    Posts
    1,736
    Blog Entries
    10
    Rep Power
    11

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

  3. #13
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    Quote Originally Posted by richyrich View Post
    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.
    "You'll never be as perfect as BLaaaaaaaaarche."

  4. #14
    Administrator richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich is a splendid one to behold richyrich's Avatar
    Join Date
    Mar 2008
    Location
    Somewhere only we know...
    Posts
    1,736
    Blog Entries
    10
    Rep Power
    11

    Quote Originally Posted by BLaaaaaaaaaarche View Post
    So my code didn't work? It worked perfectly in IE and FF.
    Yep. Just tried it and it does the job....Thanks...

  5. #15
    Barn Frequenter BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche will become famous soon enough BLaaaaaaaaaarche's Avatar
    Join Date
    Mar 2008
    Posts
    165
    Rep Power
    4

    Quote Originally Posted by richyrich View Post
    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.
    "You'll never be as perfect as BLaaaaaaaaarche."

+ Reply to Thread
Page 2 of 2 FirstFirst 1 2

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

SEO by vBSEO