Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts

    Angry DIVs like TDs (same height to the bottom)

    I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. **


    1. How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
    2. As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
    Last edited by ryanjohnsond; 08-18-2013 at 11:37 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,912
    Thanks
    15
    Thanked 227 Times in 227 Posts
    To make them fill the box you have to specify a width and height. That's all!
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Many ways to do this google equal height columns or faux columns.
    By columns I mean left-column that holds the yellow divs and right-column that hold the blue divs in your example.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Many ways to do this google equal height columns or faux columns.
    By columns I mean left-column that holds the yellow divs and right-column that hold the blue divs in your example.
    I'll take one example. Thanks!
    Here's my jfiddle attempt at a Faux Columns http://jsfiddle.net/ryanjohnsond/v5sBg/3/

    The columns need to be able to be highlighted when hovered over.
    Last edited by ryanjohnsond; 08-19-2013 at 04:00 AM.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You can also do this using display:table/table-cell, supported in IE8 and later.
    Something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Table Cells</title>
    <style type="text/css" media="screen">
    #wrapper{
    	width:900px;
    	margin:0 auto
    }
    #main { 
      display: table; 
      border-collapse: collapse; 
    } 
    .column{
      display: table-cell; 
      width:260px;
      padding:20px
    
    }
    #column1{ 
      background-color: #e7dbcd; 
    } 
    
    #column2 { 
      background-color:#FFFF99; 
    } 
    
    #column3 { 
      background-color:#999999; 
    } 
    </style>
    </head>
    
    <body>
       <div id="wrapper"> 
          <div id="header"></div> 
          <div id="main"> 
            <div class="column" id="column1"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet felis sapien. Etiam vehicula scelerisque lorem sed faucibus. Pellentesque sed odio ultricies, mattis mauris ut, convallis leo. Duis sed ante aliquet, tincidunt nisl sed, consectetur massa. Duis dui orci, elementum ac ultricies vel, placerat rutrum risus. Proin magna orci, placerat at euismod et, semper quis eros. In pretium lacus turpis, at accumsan turpis egestas sit amet. Suspendisse tellus ligula, scelerisque et metus quis, malesuada tristique justo. Donec sed posuere libero. Fusce sed massa et risus congue molestie at at lectus. In mi augue, sagittis non commodo quis, volutpat in felis. Sed vehicula euismod diam, sit amet iaculis libero venenatis et. Nulla pretium dui neque, et rutrum dolor rhoncus ut. Suspendisse commodo tellus justo, at dignissim elit feugiat in. Nulla et nisi a elit interdum aliquet.</p>
    
            </div>
            <div class="column" id="column2"> 
              <p>Donec in dolor eget est eleifend faucibus ac a nibh. Aenean ornare tortor lacus, et fermentum est mollis fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sagittis urna id velit laoreet semper. Nulla ac nisl felis. Aenean lobortis eros varius nibh lacinia pharetra. Proin id orci posuere, lacinia sem id, gravida felis. Nulla vitae facilisis velit. Pellentesque sit amet elit sed tortor commodo interdum. Donec pharetra ipsum quam, sed tincidunt sem semper eu. Proin condimentum, arcu non lobortis fringilla, sapien risus imperdiet nisl, eu tincidunt urna felis sed diam. Proin vel dolor eros. Donec fermentum lorem lectus, eu semper lorem porta vel. Donec urna enim, varius ut pharetra quis, dapibus et mauris. </p>
    		
    		</div>
            <div class="column" id="column3"> 
              <p>Donec ac lobortis sem, sed faucibus sem. Morbi nec ipsum tincidunt, malesuada tortor vitae, sodales erat. Aliquam molestie enim at metus mollis venenatis. Duis erat nibh, interdum vitae ornare eu, auctor luctus arcu. Suspendisse ullamcorper justo leo, vel dignissim orci scelerisque a. Nulla blandit velit rutrum diam faucibus rutrum. Maecenas ut sapien id magna euismod luctus eget at ante. 
    </p>
            </div>
          </div>
        </div>
    </body>
    </html>
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    SB65 has hit the nail on the head. Was going to show almost the same thing using percents for the column widths which is more fluid.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yeah, table-cell is a useful little thing, and would have solved my very first post on CF if it worked in IE5.5

    In this particular example I actually started with fluid widths and paddings, but IE8 doesn't like percentage paddings, so I just made it all fixed-width.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •