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 3 of 3

Thread: Div stretching

  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Los Angeles, California, U.S.
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div stretching

    Hello, I am new to the forums. I am in the making of a website, and am using divs.

    I know that div layout boxes stretch depending on the content placed in them, but I have two content boxes that need to be the same length.

    I'd like to know how I can make both boxes at the same height, constantly, not depending on if the have the same amount of content.

    My site is http://ghost.sporatic.net/ if you would like to look and see the two low content boxes.

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    626
    Thanks
    51
    Thanked 67 Times in 67 Posts
    Try specifying them with the same width in css:
    div1{width: 50%;}
    div2{width: 50%;}
    or
    div1{width: 100px;}
    div2{width: 100px;}

    As for height, I think there's a way to do that, but you shouldn't just specify an exact height, especially if your height is going to change (if you specify 100px for your height and the content goes past that, it won't look right). Sorry, I'm not that good at styling, but know one else was answering so I thought I'd try my best to.
    "Yeah science!"

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.alistapart.com/articles/fauxcolumns/

    You can make a background image that stretches for a containing div.

    HTML:
    Code:
    <div id="container">
      <div class="one">1</div>
      <div class="two">2</div>
    </div>
    CSS:
    Code:
    #container {
      background:url(vert-columns.jpg) repeat-y;
    }
    Edit: There are also jQuery plugins for this if you'd just like to set a min-height on your left div rather than using the faux-columns solution.
    http://www.cssnewbie.com/equal-heigh...s-with-jquery/
    http://www.filamentgroup.com/lab/set...s_with_jquery/
    Last edited by Aple; 08-05-2010 at 05:09 PM. Reason: Remembered something.


  •  

    Posting Permissions

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