SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    boston
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    header width less than combined width of below

    anyone know a fix for this?

    i want to have a fixed left column width and have the right column fill out the rest of the page...without creating a scrollbar at the bottom and with the combined width of the right and left column being the same as the header...pretty easy to do using table and a 2 colspan for the header...not so easy with CSS.


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

    Something like this:

    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Or do you mean something else?

    All you have to do is float the column left and then set a margin-left onthe static content to clear the float.

    e.g.
    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">
    #outer {
     width:60%;
     background:red;
    }
    #header{background:blue;height:100px;}
    #left{
     float:left;
     width:150px;
     background:green;
    }
    #right{
     margin-left:150px;
     background:pink;
    }
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    div>p{margin-top:0}
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header">Header</div>
      <div id="left"> 
    	<p>Left content goes here : Left content goes here : Left content goes here 
    	  : Left content goes here : Left content goes here : Left content goes here 
    	  : Left content goes here : </p>
      </div>
      <div id="right"> 
    	<p>Right content goes here : Right content goes here : Right content goes 
    	  here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : Right content goes here : Right content goes here : Right content 
    	  goes here : </p>
      </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Hope thats what you meant

    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
  •