Page 1 of 1

CSS DIV height Auto not working - solved..i think

Posted: Thu Feb 27, 2014 9:18 am
by hybris
Edit again:
Ok so i finally got it to work by setting wrapper div to position absolute and all childdivs to position relative and then float left + clear all divs thats supposed to be next to eachothers and then finally skip all top:xx px and left:xx px and use margin instead to create the spacing between the divs.

Not very intuitive that the wrapper container does not follow if you use top and left position instead of margin..

Now Im just waiting to see what will happend when i try the page in ie instead of chrome...

/edit


Edit:
Ok so I got it to work by floating / clearing the logo and left meny and setting them to position relative instead of absolute...
The problem im facing now is i use top:5px to get separation between the divs and that is not counted into the height of the wrapper container so the footer gets pushed outside of the wrappercontainer?
/edit

This is what Im trying to do:

I want 1 wrapper container div that holds my entire page h: auto w=610px (all other divs go into this)
5px from top and 5 px from the left I want a logo that is 100px x 100 px <-- Fixed size always
To the right of the logo I want a space of 5px and then 2 long divs where the first div is h=60px and w=500px the top line of this div is same as the top line of the logo to the left (that is 5px from the wrapper container top). This div can be called the banner. Directly below this div with a 5 px spacing I want a container (menu-bar) that is h= 35px and w = 500 px aligned so the bottom line of this dix is same row as bottom of the logo.

The divs above is the "header"

For the page itself I want 5 px spacing a leftside menu w=100 px and height auto then 5 px spacing and the "display page div" that is w= 500px h = auto
under the menu and the display i want 5px spacing and then a footer div h=20px w=600 px (5 px spacing left and rightside)

and then close the wrapper div

The pseudo html looks like this:

Code: Select all

<div container>
<div logo></div> <--header
<div banner></div>
<div menu under banner></div> <-- end of header (logo to left and then banner bar and menubar to the right of the logo (menu under banner)
<div l menu></div> <-- variable height
<div display></div> <-- variable height
<div footer></div>
<div>


I get everything layed out ok. For placement inside the wrapper container I use position:absolute for all child divs (logo banner menu...) but the wrapper container with height auto is 0 px height.

when i change the child divs to position relative I can manage to get the wrapper container to follow somewhat but if the menu get like h=1000px the wrapper container stops at like h 600px even tough i did not set any max height for any of the divs..

I tried to float the logo and banner+menu then clear:both then float the menu and display and clear both and then footer but it still doesnt work as I want it to.. that is I want the wrapper container to start above the logo+banner and stop under the footer no matter how much height the meny and or display page increase.

So my questions are
1) I think i should put the position of the wrapper to relative and all other to absolute. <-----Is this correct?
2) Do I have to float (and clear) the divs that are aligned next to eachothers or can i use absolute positioning and only specify top and left to place the divs where i want them and still somehow manage to get the wrapper container to "follow in height".
3) Err i forgot 3 but if someone would be kind enough to point me in the right direction in question 1 and 2 maybe 3 will solve itself :)

Thanks in advance

Re: CSS DIV height Auto not working - solved..i think

Posted: Wed Mar 05, 2014 1:21 pm
by PhpExile
Try adding overflow: hidden; to the parent div. If I understand correctly overflow: hidden wraps the content around the height: auto; so the div will expand to the height of the content.

Re: CSS DIV height Auto not working - solved..i think

Posted: Wed Mar 05, 2014 1:28 pm
by PhpExile

Code: Select all

<div container>
<div logo></div> <--header
<div banner></div>
<div menu under banner></div> <-- end of header (logo to left and then banner bar and menubar to the right of the logo (menu under banner)
<div l menu></div> <-- variable height
<div display></div> <-- variable height
<div footer></div>
<div>
What is <div display>? it should be <div id="display"></div> with #display {} in the css file or <div class="display"></div> with .display {}. If the div only shows up 1 time in the script you can use ID but if it will repeat such as in a while() {} it should be class. Might want to do some research on div ids and classes.