Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Parent-div doesn't expand with child div

Tags:

html

css

I've seen many questions like this but none of them seem to have position:absolute in it (maybe that's the problem, not sure) Always used to work with tables and now in my first attempt with div's I've encountered the following issue.

My main problem is that when one of my child-divs expands (#contentBox) then the main-div (#container) isn't expanding aswell.

If you have a look at http://www.xact.be/consciente/index_v1.html all is well, once the div expands over the min-height of the #container-div it al goes haywire, see http://www.xact.be/consciente/index_v2.html for the issue.

Not sure if i'm coding this all wrong or not, hence why i'm asking for your expertise :)

like image 838
Yoeri Rousseaux Avatar asked Jan 07 '12 01:01

Yoeri Rousseaux


1 Answers

You should only use position: absolute in rare cases. Absolute positioning a Div removes it from the normal flow of a page and disrupts the normal parent/child relationship. Instead position: relative the div and float: right. Then add the appropriate margin. You will also need to remove unnecessary absolute positioning from parent divs. Position the divs using float, padding and margin only. Absolute positioning is best used for things outside of the normal flow.

like image 132
Nicole McCoy Avatar answered Nov 11 '22 08:11

Nicole McCoy