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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I let a <div> resize to fit the contained <div>s

    Hey, I got this HTML:

    Code:
    <div class="layer">
      <div class="post">Lorem ipsum...</div>
      <div class="info">Lorem...</div>
    </div>
    And this CSS:

    Code:
    div.layer{
      height: auto;
      background-color: #FFF;
    }
    
    div.post{
      width: 70%;
      float: left;
      background-color: #FFF;
    }
    
    div.info{
      width: 20%;
      float: right;
      background-color: #FFF;
    }
    Now what I wanted was that, if div.post was larger than div.info, div.layer would resize along.

    But it doesn't do so, meaning that there's a hole below div.info. Any suggestion to fix that?

    Thanks in advance.
    Yeah that.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Code:
    .layer {display: table;}
    .post {display: table-cell;}
    .info {display: table-cell;}
    Internet Explorer doesn’t support the above declarations.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem you are describing either requires Javascript or Faux Columns.

    Edit: You will also need to clear the floats.
    Last edited by mark87; 10-29-2006 at 08:35 PM.

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Location
    The Netherlands
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Code:
    .layer {display: table;}
    .post {display: table-cell;}
    .info {display: table-cell;}
    Internet Explorer doesn’t support the above declarations.
    It did work, except that the bottom two lines in the info div were moved a bit to the right.

    I'd also rather have IE supports it, but if it doesn't: too bad :P

    Quote Originally Posted by mark87 View Post
    The problem you are describing either requires Javascript or Faux Columns.

    Edit: You will also need to clear the floats.
    If you meant using clear: left; and clear: right; then it doesn't work.

    Also, the Faux Columns would not help as div.layer is not as large as the largest contained column, but has a height of 0...
    Yeah that.


  •  

    Posting Permissions

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