I'm creating a web page and using a div container to include inside all the contents.
Here is a snap of my css code:
#container { position: relative; margin: auto; width: 990px; height: auto; } #header{ width: 990px; height: 115px; } #slideShow{ position:absolute; float: left; left: 0; margin-top: 0; margin-right: 355px; margin-left: 0px; width: 635px; height: 500px; z-index: 1; } #sideAdvs{ position: absolute; right: 0; margin-top: 0; width: 300px; z-index: 0; } div#articles{ width: auto; height: auto; position: absolute; left: 0; top: 620px; } div#footer{ position:absolute; bottom: 0; background-color: #B1BEC2 !important; text-align: center !important; width: 990px; height: 100px; } div#footer a{ text-decoration: none; color: white; } div#footer table{ border: none !important; text-align: center; margin: 0; padding: 0; } div#footer p{ text-align: center; font-size: 15px; }
My problem is that, firebug shows the container's div height as the headers height only, and i have a big problem placing the footer. Instead of that the footer div is placed inside the container div but firebug shows it outside. I don't know if i have something wrong on my css but all the other elements positions is just as i wanted them to be. The divs sequence in my html code is.
<div id="container"> <div id="header"></div> <div id="slideShow"></div> <div id="sideAdvs"></div> <div id="articles"></div> <div id="footer"></div> </div>
Thanks in advance...
absolute positioning and
absolute positioning and floats are removed from the document flow. I'd recommend redoing the layout without the AP. Use floats and margins and learn how to contain the floats.
can i achieve
can i achieve the 990px width of the usefull content of the site without a div container and the relative positioning??
Sorry but i'm new on advance css layouts and everything was working fine till now..
Keep the container div with
Keep the container div with it's width and auto left and right margins. You probably don't need the relative positioning on it.
Why div is outside
Ok i will do that...
The other problem i have with the div seems to keep on even if i remove the css file completely.
Although in my html code is inside the container div on the browser appears outside...
This is really weird,and i can't think of any solution and tripple check my code too..
have you converted to
have you converted to floats? Did you investigate containing your floats?
But there is no css at all
The thing is that i removed any css ... no formatting at all..just the html code..