SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Little height problem

    I got this basic layout from a generator, ive got the colours going and added some text to see what happens when the content box gets stretched; the sidebar height doesnt change. How could i change it so when either the sidebar changes height, the content box is the same height, and vice versa?

    http://www.m3d.me.uk/layout.html

    Thanks

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

    This is the same problem that occurs time and again when trying to duplicate a table layout.

    You can either resort to a javascript solution to maintain consistent heights. (There's an article about it on sitepoint somewhere, you should find it if you search for it.)

    Alternatively you could use Doug,s method of floating an element in the border to achieve a full column colour.

    http://www.redmelon.net/tstme/3cols2/noborder.htm

    I've just roughly drawn up an example with your code using that technique.
    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>
    <style type="text/css">
    	  body {text-align:center}
       #container {
    		 width: 760px;
    		 \width: 780px;
    		 w\idth: 760px;
    		 border: 1px solid gray;
    		 margin: 10px;
    		 margin-left: auto;
    		 margin-right: auto;
    		 padding: 10px;
    	   text-align:left;
       }
    	  #banner {
    		 padding: 5px;
    		 margin-bottom: 5px;
    		 background-color: #BFA260;
    	  }
    	  #content {
    		position:relative;
      width:610px;	 
      border-left:150px solid #CCCC99;
    		background-color: #DFCEA7;
    	  }
       *html #content {width:758px;w\idth:610px}
       #content p {padding:0px 5px 0 5px;margin-top:0;}
    	  #sidebar-a {
    		float: left;
    		/*width: 200px; \width: 210px; w\idth: 200px;*/
    		margin-left:-150px;
      width:140px; 
    		padding-left: 5px;
    		background-color: #CCCC99;
       position:relative;
    	border-right:5px solid #FFF;
       }
    	*html #sidebar-a {
      margin-left:-145px;
      \width:155px;
    		w\idth: 140px;
      }
     #sidebar-a p {margin-top:0;margin-bottom:0}
      #footer {
    		 clear: both;
    		 padding: 5px;
    		 margin-top: 5px;
    		 background-color: #BFA260;
    	  }
       #border {border-left:5px solid #fff}
       #clear {
       clear:both;
       height:0px;
       overflow:hidden;
       margin:0;padding:0;
       }
       </style>
    </head>
    <body>
    <div id="container"> 
      <div id="banner">Banner</div>
      <div id="content"> 
    	<div id="border"> 
    	  <div id="sidebar-a"> 
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    		<p>Hello</p>
    	  </div>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <div id="clear" /></div>
      </div>
    </div>
    <div id="footer">Footer</div></div>
    </body>
    </html>
    You will need to test it in the browsers you want to support as it does contain a few hacks.

    It's quite a lot of effort for such a small effect and you may be better off just going for a white background in that column.

    Anyway hope it's of some use.

    Paul

  3. #3
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow paul, thanks so much!


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
  •