SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member SiNiStEr NaTiOn's Avatar
    Join Date
    Nov 2003
    Location
    united states
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    having a slight problem <DIV> tags

    I had posted this over in the HTML and XHTML forum, but I realised that it should be in this forum, because my problem is with CSS. The layout for a site that I'm building is a 3 column with header and footer. I had manage to get a few things straighten out over in the other forum but the middle and right columns isn't align with the top of the first column. I been at this all day to correct this and I do believe I forgot how to do this in CSS.

    I'm using Firefox and plan on creating another CSS for IE and fix what is needed for it so it would show correctly in that browser after I build the site, but I need to get this layout to work like it should.

    The url where my layout is located at MY LAYOUT

    I'll provide the CSS and the HTML
    Code:
    html, body {
      height: 100%;
    }
    
    body{
      background-color: #000000;
      font-family: Verdana, Tahoma, "Courier New", Arial, sans-serif;
      color:#00FFFF;
    }
    
    /* This sections deals with the container area */
    #container{
      width: 90%;
      margin-top: 0em;
      margin-bottom: 0em;
      background-color: #000000;
      color:#00FFFF;
      border: none;
      line-height: auto; 
    }
    
    /* This sections deals with the Header area */
    #header{
      padding: .5em;
      margin: 0em;
      border: .05em solid #024FFE;
    }
    
    /* This sections deals with the left nav area */
    
    #leftnav{
      float: left;
      width: 8em;
      margin: 0em;
      padding: 1em;
      border: .05em solid #024FFE;
    }
    #leftnav2{
      float: left;
      clear: left;
      width: 8em;
      margin: 0em;
      padding: 1em;
      border: .05em solid #024FFE;
    }
    
    /* This sections deals with the right nav area */
    
    #rightnav{
      float: right;
      width: 7.3em;
      margin: 0em;
      padding: 1em;
      border: .05em solid #024FFE;
    }
    #rightnav2{
      float: right;
      clear: right;
      width: 7.3em;
      margin: 0em;
      padding: 1em;
      border: .05em solid #024FFE;
    } 
    
    /* This section deals with the content area */
    
    #content{
      text-align: left;
      margin-left: 175px;
      margin-right: 165px;
      border: 1px solid #024FFE;
      padding: 1em;
      max-width: 36em; 
    }
    
    /* This section deals with the footer area */
    
    #footer{
      clear: both;
      margin: 0;
      border: 1px solid #024FFE;
      padding: .5em;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    
    <head>
      <title>Template Layout</title>
        <link rel="stylesheet" href="styles/oag.css" type="text/css" />
    
    
    </head>
    
    <body>
    
      <center>
    
        <div id="container">
    
        <div id="header">
          <center>
            <br />
                Logo Goes Here
            <br />
            <br />
          </center>
        </div>
    
      <br />
    
        <div id="leftnav">
          <br />
              Left Menu #1
          <br />
        </div>
    
      <br />
      <br />
    
        <div id="leftnav2">
          <br />
              Left Menu #2
          <br />
        </div>
    
        <div id="rightnav">
          <br />
              Right Menu #1
          <br />
        </div>
    
      <br />
    
        <div id="rightnav2">
          <br />
              Right Menu #2
          <br />
        </div>
    
        <div id="content">
          <br/>
          <br/>
              Site Content Goes Here
          <br/>
          <br/>
        </div>
    
      <br />
    
        <div id="footer">
          <br />
              Copyright info Goes Here
          <br />
        </div>
    
        </div>
    
      </center>
    
    </body>
    
    </html>
    any help on getting the the right and center column to line up wuth the first column would be appreciated.

  2. #2
    SitePoint Enthusiast Star3night's Avatar
    Join Date
    Feb 2004
    Location
    Milky, WY
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1st, remove the <center> and spare <br /> tags.

    Then, try making the widths of your columns in percentages.

    Also, see this post http://www.sitepoint.com/forums/showthread.php?t=143801 it deals exactly with what you're trying to accomplish.

  3. #3
    SitePoint Member SiNiStEr NaTiOn's Avatar
    Join Date
    Nov 2003
    Location
    united states
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the spare <br />'s and the center out. I'll check that link out later today, it's getting late here almost 1am. Thanxs.

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

    You need to enclose the left and right columns in one float each otherwise the floate will be out of sync.

    You can float additional floats (if needed) inside these floats.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Template Layout</title>
    <style type="text/css">
    html, body {
    height: 100%;
    }
    body{
    background-color: #000000;
    font-family: Verdana, Tahoma, "Courier New", Arial, sans-serif;
    color:#00FFFF;
    }
    /* This sections deals with the container area */
    #container{
    width: 90%;
    margin-top: 0em;
    margin-bottom: 0em;
    background-color: #000000;
    color:#00FFFF;
    border: none;
    line-height: auto; 
    }
    /* This sections deals with the Header area */
    #header{
    padding: .5em;
    margin: 0em;
    border: .05em solid #024FFE;
    }
    /* This sections deals with the left nav area */
    #left {
    float:left;
    width:10.1em;
    }
    #leftnav{
    float: left;
    width: 8em;
    margin: 0em;
    padding: 1em;
    border: .05em solid #024FFE;
    }
    #leftnav2{
    float: left;
    width: 8em;
    margin: 0em;
    padding: 1em;
    border: .05em solid #024FFE;
    }
    /* This sections deals with the right nav area */
    #right {
    float:right;
    width:9.4em;
    }
    #rightnav{
    float: right;
    width: 7.3em;
    margin: 0em;
    padding: 1em;
    border: .05em solid #024FFE;
    }
    #rightnav2{
    float: right;
    width: 7.3em;
    margin: 0em;
    padding: 1em;
    border: .05em solid #024FFE;
    } 
    /* This section deals with the content area */
    #content{
    text-align: left;
    margin-left: 175px;
    margin-right: 165px;
    border: 1px solid #024FFE;
    padding: 1em;
    max-width: 36em; 
    }
    /* This section deals with the footer area */
    #footer{
    clear: both;
    margin: 0;
    border: 1px solid #024FFE;
    padding: .5em;
    }
     
    </style>
    </head>
    <body>
    <center>
    <div id="container"> 
    	<div id="header"> 
    	 <center>
    		<br />
    		Logo Goes Here <br />
    		<br />
    	 </center>
    	</div>
    	<br />
    	<div id="left"> 
    	 <div id="leftnav"> <br />
    		Left Menu #1 <br />
    	 </div>
    	 <div id="leftnav2"> <br />
    		Left Menu #2 <br />
    	 </div>
    	</div>
    	<div id="right"> 
    	 <div id="rightnav"> <br />
    		Right Menu #1 <br />
    	 </div>
    	 <br />
    	 <div id="rightnav2"> <br />
    		Right Menu #2 <br />
    	 </div>
    	</div>
    	<div id="content"> <br/>
    	 <br/>
    	 Site Content Goes Here <br/>
    	 <br/>
    	</div>
    	<br />
    	<div id="footer"> <br />
    	 Copyright info Goes Here <br />
    	</div>
    </div>
    </center>
    </body>
    </html>
    The layout above looks the same in firefox and ie6. I

    t's not a good idea to wait until you've finished before cheking in different browsers , this is the biggest mistake people make. Check your work every step of the way in each browser you want to support and you will finish up with a design thats cross browser friendly.

    Hope that helps.

    Paul

    PS: As mentioned in the above post it's better not to use <br> just for spacing things out but use <p> tags and control their margins with css.

  5. #5
    SitePoint Member SiNiStEr NaTiOn's Avatar
    Join Date
    Nov 2003
    Location
    united states
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanxs Paul O'B I see where I messed up at.

    Thanxs,
    SiNiStEr


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
  •