SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Columns Giving me Problems

    I need 3 columns, but it isn't working so great. The first column is a menu and will be 153 pixels. The thirds column is supposed to have a width of 25%. The middle column is whatever is left.

    What happens, though, is the first column is on top. Below it is the second column and it runs right through the third. The third column is also slightly below the second.

    http://www.ceetus.com/test.html

    Here's the HTML:
    HTML Code:
    <html>
     <head>
       <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
     </head>
    
    
     <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
      <div id="menu">
       <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
       </ul>
      </div>
    
      <div id="content">
       <div align="center"><h4 style="color: red;">Upcoming Events</h4></div>
       dfgsdfgsdfg sfdg sdfg sdfg sdfgdsfgsd fgs fdgs dfgsdfg sdfg fdsgsdfgsdg sdg dsg sdfgsdfgsdf gdfsg sdfg sdfg sdfg dsgdsg sdg sdg sdg sdg sdfg sdfg 
    
    
      <div id="extra">
    <h4 style="color: red;">News</h4>
    
    something<br />
    whatever<br />
    something else
    
    <h4 style="color: red;">New Features</h4>
    I don't know
      </div>
      </div>
    
     </body>
    </html>
    Here's the CSS:
    Code:
    html, body, img {
        margin: 0;
        padding: 0;
    }
    
    body {
        line-height: 1.5;
        min-width: 758px;
    }
    
    
    
    #content {
        float: left;
        margin-top: -45px;
        padding-left: 15px;
    }
    
    #extra {
        float: right;
        width: 25%;
        margin-top: -45px;
        padding-right: 15px;
    }
    
    #menu {
        clear: both;
        float: left;
        width: 153px;    
    }
    
    #menu ul {
     margin: 0; 
     padding: 0;
     list-style-type: none;
     font-family: verdana, arial, sanf-serif;
     font-size: 12px;
    }
    
    #menu li {
     margin: 0px 0;
     margin-right: 10px;
    
    }

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Hull, England
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Howdy!

    I have thrown together a quick 3 column page.

    You'll have to take the css out of the page and add your content, but it works fine.

    Code:
    <html>
    <head>
    <style>
    /* turns the padding and margin off on everything */
    * {
    	margin: 0;
    	padding: 0;
    }
    html {
    	min-height: 101&#37;; /* force a scrollbar */
    }
    
    div#main {
    	position: relative;
    }
    
    div#left {
    	position: absolute;
    	left: 0; /* position to the left */
    	top: 0;
    	width: 200px;
    }
    div#center {
    	/* give room for the left and right columns */
    	padding: 0 200px 0 200px; /* top right bottom left */
    }
    div#right {
    	position: absolute;
    	right: 0; /* position to the right */
    	top: 0;
    	width: 200px;
    }
    </style> 
    </head>
    <body>
      <div id="main">
        <div id="left">left content</div>
        <div id="center">center content</div>
        <div id="right">right content</div>
      </div>
    </body>
    </html>
    Good luck!
    Design is not just what it looks like and feels like.
    Design is how it works.

    www.cycadelic.org

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies, but I am still having problems. I have a header image that goes on top. When I add it, more problems occur. Craig's works out okay, but the absolute position for the right column will overlap it with the middle column if there is a horizontal scroll. Also, the middle and right column do not line up at the top in IE.
    http://ceetus.com/index2b.html

    All4Nerds's way added spaces to the images (it appears to be caused by the DTD) in Firefox. Also the middle column goes up too high. In IE, the menu width is no longer than the right size.
    http://ceetus.com/index2.html

    Here's another way I tried:
    http://ceetus.com/index2c.html
    It uses a generic 3 column layout. The problems with this one are:
    1) it adds space to the top of the menu in IE
    2) The middle and right column wrap if the browser window isn't big enough.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would be perfect if the menu in IE wasn't so spaced out. Why does it have gaps between the links when Firefox doesn't?

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great, thanks!


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
  •