6 replies [Last post]
johniem
Offline
Regular
Last seen: 4 years 44 weeks ago
Timezone: GMT+3
Joined: 2009-05-28
Posts: 17
Points: 0

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...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 20 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

johniem
Offline
Regular
Last seen: 4 years 44 weeks ago
Timezone: GMT+3
Joined: 2009-05-28
Posts: 17
Points: 0

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..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 20 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

johniem
Offline
Regular
Last seen: 4 years 44 weeks ago
Timezone: GMT+3
Joined: 2009-05-28
Posts: 17
Points: 0

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..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 20 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you converted to

have you converted to floats? Did you investigate containing your floats?

johniem
Offline
Regular
Last seen: 4 years 44 weeks ago
Timezone: GMT+3
Joined: 2009-05-28
Posts: 17
Points: 0

But there is no css at all

The thing is that i removed any css ... no formatting at all..just the html code..