SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: need help

  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help

    I can't for the life of me get this to work. I have 2 div's, one above the other in the header file. One is 140px wide, the other is ~70%. Now, the 70% one is being displayed on the bottom, after div 1 ends. I want them to be side by side. div 1 takes up 140px, then beside it div 2 takes up, and is centered aligned, in the remaining space.

    Code:
    <div id="menu">
    	Menu
    </div>
    
    <div id="welcome">
    	Welcome
    </div>
    Code:
    #menu				{
    		height: 100%;
    		width: 140px;
    		background-color: #555555;
    		text-align: left;
                    position: relative;
    	}
    #welcome			{
    		height: 150px;
    		width: 500px;
    		border: 1px solid #000000;
    		text-align: center;
                    position: relative;
    	}

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For example:
    #menu { float:left; width:140px; }
    #welcome { margin-left: 150px; }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Or another way (although I suspect this will pose more questions than it answers ).

    You could place your left hand menu absolutely and then just set a margin left on the other content to keep it clear.

    I see you have put 100% height into your menu so I'm assuming that you want the menu to run all down the page. (The best way to do this is to put a repeating gif down the left hand side of the page in the body background to give you the solid color.).

    100% height is taken as viewport or document length if longer in Ie6. But other browsers Mozilla and Opera take it as viewport height only so yur content will spill out if longer than the viewable page etc. You also need to set 100% height in the body for either of these to happen.

    Heres an example (not using the background gif) that might give you some ideas.

    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">
    body {
    height:100%;}
    #menu{
      height: 100%;
      width: 140px;
      background-color: #555555;
      text-align: left;
      position:absolute;
      left:0;top:0;
     }
    #container{
      margin-left:150px;
     }
    #welcome   {
      width:70%;
      height: 150px;
      border: 1px solid #000000;
      text-align: center;
    		margin-left:auto;
      margin-right:auto;
     }
    p {margin-top:0}
    </style>
    </head>
    <body>
    <div id="menu">
      <p>Menu </p>
    </div>
    <div id="container">
    <div id="welcome">
     <p>Welcome</p>
    </div>
     <p>other stuff goes here</p>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul


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
  •