SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Hungary
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two blocks next to each other

    I have two blocks next to each other in my design but one of them longer (different height) than the other. I like to see these in the same size (same height).

    Just a simple design technique which is pretty easy with tables, but how can I do it with only css (no JavaScript pls)?

    For example:
    Code:
     
    .Box {font-size: 11px; border: 1px solid #ABC0CD; background:#F4F6FA;}
    .Left {float:left; width: 20%; background:#DFE7EC; color:#666666;}
    .Right {right:0;}
    
     
    <div class=Box>
      <div class=Left>
      </div>
      <div class=Right>
      </div>
    </div>
    If the Left box higher(longer) than the Right box, it will overlap the parent Box.

    Thanks for any suggestions,
    http://co3app.com
    Manage projects, share files, collaborate
    with people and control your finances online.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello World

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Hungary
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. It works, but if the Left box is green and the Right box is red, the result is ugly if one of the boxes is higher than the other. How can I manage to make the two boxes to the same height (independently from the content in the boxes)?

    I have some JavaScript for this reason, but I would like to make it script-free.
    http://co3app.com
    Manage projects, share files, collaborate
    with people and control your finances online.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    There's display: table-cell; but it doesn't work in IE . Otherwise, you'll have to use this beauty from Doug .

  5. #5
    SitePoint Enthusiast newdaynewdawn's Avatar
    Join Date
    Aug 2003
    Location
    Central KY
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While you've received several replies here's someting you can play with using the code you submitted. Note, I took some liberty but you can modify it back to suit you...
    <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Untitled</TITLE>
    <STYLE type="text/css">
    .Box {height: 100%;font-size: 11px; border: 1px solid #ABC0CD; background:#F4F6FA;}
    .Left {float:left; line-height: 50px;width: 20%; background-color:yellow; color:blue;}
    .Right {height: 50%;background-color:blue;}
    </STYLE>
    </HEAD>
    <BODY>
    <DIV class="Box">define the box
    <DIV class="Left">start left part
    </DIV>
    <DIV class="Right">start right part
    </DIV>
    </DIV>
    </BODY>
    </HTML>l replies hes

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Hungary
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this one vgarcia but it wont work. Just to easily understand my problem here is the link to my site's forum: http://www.pdamania.hu/forum/forum3....esc&orderSET=1

    Look at the blue boxes which are contains the posts. The darker blue is sometimes shorten than the lighter blue. This is my problem. I would like to see the darker blue box in the same height as the lighter one.

    Another problem is as you see the ForumBox is sometimes wider, sometimes is in the correct width. When it's wider the box is float under the right-side column. Does anybody know why?

    Thanks for you help,
    http://co3app.com
    Manage projects, share files, collaborate
    with people and control your finances online.

  7. #7
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    There's display: table-cell; but it doesn't work in IE . Otherwise, you'll have to use this beauty from Doug .
    Only works if you set your second column width in pixels, ems, exs, points, well... anything except percent!

    I don't have time to take it any further, but the code below will get you two colums in IE (IMSNHO correct) and Opera (Fudged, shouldn't work) but not Mozilla (Doesn't understand clear properly).

    Code:
    div { position: relative; } 
    * { margin: 0; padding:0; }
    HTML Code:
    <div>
    
    <div style="background: #aaaaaa;">
    <div style="background: #aaaaaa; float: left; width: 50%;">
      <p>Lorem ipsum ... amet.</p>
      <p>Duis autem livingstone magna aliquam ... volutpat.</p>
    </div>
    <div style="background: #efefef; margin-left: 50%; min-height: 100%;">
      <p>Lorem ipsum dolor sit amet.</p>
    <div style="background: orange; clear: both;"></div>
    </div>
    <div style="background: orange; clear: both;"></div>
    </div>
    
    </div>
    hth,
    Douglas
    Hello World

  8. #8
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been waiting for this...

    Check out http://shop.nathansfamous.com/

    You can see my two boxes in the middle of the page. Here's my CSS code . You can probably leave out the text-align code. I forgot why I used that now...
    Code:
     
    #col1 { 
     width:49%; 
     float:left; 
     text-align: left;} 
    #col2  {
    	width:49%; 
    	float:right; 
    	text-align: left; }
    To display I put those boxes inside of a wrapper div. I haven't stylesheeted it yet because I'm still working minor bugs out of it. You'll need those extra column wrappers if your going to use my method. Explanation below.
    Code:
     <div style="width: 98%; margin: 2px auto;" align="center">
       <div id="col1"> 
       <div id="col1wrapper">
    content
       </div>
       </div>
    	  <div id="col2"> 
       <div id="col2wrapper">
    content
       </div>
       </div>
    </div>
    Now my favorite part.

    To get the boxes the same height I used some javascript code from Kevin's article on 'Exploring the limits of CSS layouts' . A couple of small easy mods later and I had nice well behaved boxes. The only thing that I can't get working is triggering the resize when a user makes the window smaller.

    Code:
    <script type="text/javascript">  
    function adjustLayout()  
    {  
     // Get natural heights  
     var lHeight = xHeight("col1");  
     var rHeight = xHeight("col2");  
       
      if ( xHeight("col1") > xHeight("col2" ) )
      {
      var maxHeight = lHeight; 
      }
      if ( xHeight("col2") > xHeight("col1" ) )
      {
      var maxHeight = rHeight; 
      }
      
     
     // Find the maximum height  
     var maxHeight =  
       Math.max(maxHeight, Math.max(lHeight, rHeight));  
     
     // Assign maximum height to all columns  
     xHeight("col1", maxHeight);  
     xHeight("col2", maxHeight);  
     
    }
    window.onload = function()  
    {  
     xAddEventListener(window, "resize",  
       adjustLayout, false);  
     adjustLayout();  
    }  
    </script>


    That's it! Have fun. Send me your questions if you have any. I'll be more than happy to help your out with this. I know I'm going to be using this method a lot more in the future.

    I'd also like to recommend http://www.cross-browser.com/ if your interested in using javascript to snazz up your css. They have some really nice stuff going on.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    Hungary
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Winged Spider: thanks alot, but I don't want to use any JavaScript for this reason. I know that your solution is very well, but I'm looking for something artful. (Otherwise I'm using the x.js and the adjustLayout.js scripts, but only for the main part of the page.)
    http://co3app.com
    Manage projects, share files, collaborate
    with people and control your finances online.


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
  •