Results 1 to 3 of 3
  1. #1

    box model problems

    hey guys

    i've laid out three div layers on my page. left div and right div are held within container div.

    the container alignment is set to right, the left div is set to float to the left.

    this allows me to have the two div layers side by side.

    i'm having difficulty with it though - even with the height of the left div fixed at 200px, it only shows if the content in the right div is equal to or greater than 200.

    if the content in the right div is less than 200, both divs are only shown until the content in the right div ends.

    how do i get the left div to stay the set height of 200px?

  2. #2
    Join Date
    Aug 2005
    Location
    Barcelona, Spain
    Posts
    3,397
    have you cleared those floats?
    hi there!

  3. #3
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Try inserting the following into your style sheet:

    Code:
    /* CLEARFIX */
    #container { overflow:hidden }
    * html #container { height:1% ; overflow:visible }
    Simply add any other elements to these two rules that require container clearing, and everything should show up on the screen

    One thing troubles me though. If you left div contains actual content (writing or images), that content should not be obscured. Using a clearing mechanism such as what I've posted is meant to force the containing element to open up vertically to accommodate elements floated within. It sounds to me like something in the left div simply isn't showing up on the screen, or is only being partially displayed. Out of curiosity, is the purpose of the left div solely to display a background image? If so, your description would now make perfect sense (and the clearing mechanism would not necessary be the right answer).

    The best thing to do would be to post a link to the issue you're having. It'll be very difficult to give a proper diagnosis without seeing the problem firsthand
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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