Stretching Background divs 88 Responses

Last post: 1 year, 10 months ago | Thread started: Mar 21, 10, 3:16 p.m.

RespondNew TopicDisable Images

• scrap_paper

  If I have two divs, a parent (with repeating vertical background) and a child (with copy) and I want the parent div to stretch to the height of the child how do I have to set up the css?

  Mar 21, 10, 3:16 p.m. – Permalink

• lukus_W

  How far have you got?

  Post a link ...

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:21 p.m. – Permalink

• acescence

  it should wrap to fit the child div as long as the child div isn't floated and you haven't given the parent div an explicit height

  • or, not and– acescence

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:24 p.m. – Permalink

• scrap_paper

  http://www.kausticdesign.com/cil…

  This is the page I'm working on.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:39 p.m. – Permalink

• scrap_paper

  http://www.kausticdesign.com/cil…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:40 p.m. – Permalink

• scrap_paper

  There are two child divs (one left and one right) with floats.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:40 p.m. – Permalink

• acescence

  http://www.webtoolkit.info/css-c…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 3:52 p.m. – Permalink

• lukus_W

  As acescence says above .. clearing (or lack of) is your problem.

  Adding:

  #middle-wrapper { overflow: hidden }

  ... should help.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 4:04 p.m. – Permalink

• scrap_paper

  The #middle-wrapper { overflow: hidden } worked! Unreal.

  I had a clear in there just above the footer. Do I need to clear the floats elsewhere?

  • Clear floats by applying a clearfix class or overflow:hidden / auto to the direct parent container.– lukus_W1/2

    +1 clearfix is your friend– acrossthesea2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 21, 10, 4:12 p.m. – Permalink