CSS Height problem

Discussion in 'CSS' started by DPian, Jan 23, 2011.

0
  1. #1
    when i am writing something inside .container_left and container_right div the div are overlapping with the footer (shown in attached picture ) How to set the height of container_left and container_right in this page so that it height increases automatically when we insert some element in these div and the footer remain at the bottom ?

    .content height is set to 100% and container, container_left , container_right height is set to auto.
    please see the attachment
     

    Attached Files:

    • demo.jpg
      demo.jpg
      File size:
      21.8 KB
      Views:
      176
    DPian, Jan 23, 2011 IP
  2. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #2
    Do you have a link to the actual site? Have you tried clear:both on the footer?
     
    jeremyhowell, Jan 24, 2011 IP
  3. DPian

    DPian Well-Known Member

    Messages:
    1,352
    Likes Received:
    53
    Best Answers:
    0
    Trophy Points:
    195
    #3
    This is the css,

     
    DPian, Jan 24, 2011 IP
  4. c4ntaloop

    c4ntaloop Greenhorn

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #4
    The problem is you put the footer with position:absolute and I dont see container_left and container_right element in the CSS. Try to remove position:absolute from footer, set width: (half of the container) and float:left for both container_left and container_right, last put clear:both on the footer. See if it works.
     
    c4ntaloop, Jan 24, 2011 IP
  5. DPian

    DPian Well-Known Member

    Messages:
    1,352
    Likes Received:
    53
    Best Answers:
    0
    Trophy Points:
    195
    #5
    actually i've edited the css after posting this thread that is why there was so container_left and container_right,
    btw , your post really helps me ..it works :)
    can you please tell me what was the actual problem with that ?
    edit: margin-bottom is not working on the container :s why ?
     
    Last edited: Jan 24, 2011
    DPian, Jan 24, 2011 IP
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #6

    position: absolute;     Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. take a look at http://www.yourhtmlsource.com/stylesheets/csslayout.html

    Not sure, can't see your markup or reference to style.
     
    radiant_luv, Jan 24, 2011 IP
  7. c4ntaloop

    c4ntaloop Greenhorn

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #7
    As it's said above, position:absolute takes the element out of flow. The flow in CSS by default goes from left to right, if there is not enough space for next element on the right then it will be put below in the next line.

    By removing "position:absolute" you make all 3 elements (container_left , container_right, and footer) back to flow. First container_left is put at the very left, then container_right just next to it, and because there is no more space for footer on the right it will just be put down below. I hope it make sense.
     
    c4ntaloop, Jan 24, 2011 IP