SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div #left and div #content to have the same height

    Hi,

    would it be possible to have div #left have the exact same height as div #content without javascript or something of the kind? I mean just with CSS I don't know what the exact same height is going to be so that's a problem

    The reason I want this is because div #left has a right border which does not always cover the entire area it should because the #content may sometimes be bigger than #left so the border stops.

    Also, putting the border with #content is no use because then #left may be bigger.

    Some code:
    Code:
    #left {
            width: 125px;
            color: red;
            font-size: small;
            float: left;
            border-right: 4px solid #fff;
            padding-left: 5px;
            padding-top: 5px;
    }
    #content {
            width: 630px;
    	margin: 0;
    	padding: 5px;
            font-size: small;
            float: right;
    }
    If anyone has a solution to this problem that would be great.

    Thanks,

    Kilroy

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put them both in a wrapper div that would automatically stretch to the height of the tallest one of them, and set both #left and #content to 100% high within the wrapper (which would have no height specified of course)... that would work, no?

    Code:
    #wrapper {
            width: 100%;
            margin: 0px;
            padding: 0px;
    }
    #left {
            width: 125px;
            color: red;
            font-size: small;
            float: left;
            border-right: 4px solid #fff;
            padding-left: 5px;
            padding-top: 5px;
            height: 100%;
    }
    #content {
            width: 630px;
    	margin: 0;
    	padding: 5px;
            font-size: small;
            float: right;
            height: 100%;
    }

  3. #3
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you maybe give an example of this? Sorry but I'm kinda fuzzy after working on this code all day

  4. #4
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The best way to do it is to fake it. Just make a container where the background-image, look like a two column layout. Then put the other divs inside. As either of them grow so will the container div. Keeping the illusion of two columns
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    added it after...!

  6. #6
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @greg: That doesn't work, sorry
    @ new guy: I'm looking for a solution without graphics, using only CSS, I'm afraid

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

    Just use a negative margin to drag the borders on top of each other.
    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:778px;
    border:1px solid #000;
    background:red;
    }
    #left {
    		width: 125px;
    		font-size: small;
    		float: left;
    		border-right: 4px solid #fff;
    		padding-left: 5px;
    		padding-top: 5px;
    }
    #content {
    	width: 630px;
     margin: 0;
     padding: 5px;
    	font-size: small;
    	float: left;
    	border-left: 4px solid #fff;
     position:relative;
       margin-left:-4px;
    }
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="left"> 
    	<p>This is some left content : This is some left content :This is some left 
    	  content : This is some left content :This is some left content :This is 
    	  some left content : This is some left content :This is some left content 
    	  :This is some left content : </p>
      </div>
      <div id="content"> 
    	<p>This is some right content : This is some right content : This is some 
    	  right content : This is some right content : This is some right content 
    	  : This is some right content : This is some right content : This is some 
    	  right content : This is some right content : </p>
      </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Theres more examples in my 3 col demo sticky thread

    Paul

  8. #8
    If it aint Dutch it aint much Kilroy's Avatar
    Join Date
    Oct 2003
    Location
    The Netherlands
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As always Paul, you have it correct immediately. I don't know how you know all this stuff but it's just awesome!

    Thanks,

    Kilroy


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
  •