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