PDA

View Full Version : full width div problem


scrufffydoo
12-21-2008, 11:28 AM
Hi everyone, I'm new here so please excuse the cheeky 'jumping in with the first problem' deal.

I'm working on my site which needs (from top to bottom) a central header of 980px, a full width navbar div, a main content div of 980 and then another full width div for the footer.

I have these set quite nicely on the page and all is well except when loading the page into a browser with a window smaller than 980 (then naturally the scroll bar appears), when scrolling right the 2 full width divs are chopped off, they are set to 100% width so I guess they size at exactly 100% of the window they are loaded into without accounting for the scrolling. I tried it on IE and Firefox with the same result. I also took the width setting out completely and loaded in a wide background image but that didn't work either.

Any ideas hjow to get these to stay full width under any scenario? I didn't use a wrap on this page either as I wasn't sure how that would affect the full width sections, good or bad idea d'ya think ?

Thanks in advance, hopefully I may be able to contribute something useful from time to time :)

css :
@charset "utf-8";
body {
font-family: Verdana, Arial, Helvetica, "Trebuchet MS";
font-size: 100%;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#header {
position:relative;
left:0px;
top:0px;
width:980px;
height:150px;
z-index:1;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #CCFFFF;
}
#navbar {
position:absolute;
left:0px;
top:115px;
height:35px;
z-index:4;
padding: 0px;
background-color: #0066CC;
margin: 0px;
width: 100%;
}
#maincontent {
position:relative;
left:0px;
top:0px;
width:980px;
height:300px;
z-index:2;
background-color: #CCCC99;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
}
#footer {
position:relative;
left:0px;
top:0px;
width:100%;
height:200px;
z-index:3;
background-color: #FFCCFF;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

coloeagle
12-21-2008, 03:20 PM
If you have a div set for 100% then yes it will expand or contract automatically adjusting to the browser size. A fixed width div wider than the browser will cause a horizontal scroll bar.

Without seeing the html for the page. Going strictly on the css you have posted.

Place all your layout divs inside a 'wrapper' div. This will give you a parent div to hold the child divs. Set this div to your desired width. You can then set the child divs to this same width or to 100% of the parent div.

scrufffydoo
12-21-2008, 07:56 PM
Its tricky to explain this problem, the effect I want is like this
http://d47404.u22.gate13.net/index.html, you see the navbar and footer extend full width while the main content is set at a fixed width (Im using a widescreen monitor so the effect is fairly pronounced)

The strange problem with my version is that when (viewing in a small pane which introduces the scroll bar) when you scroll right the 2 full width elements have missing areas. HTML and new css below

<body>

<div id="header"></div>

<div id="navbar">
<div id="navbuttonbar"></div>
</div>

<div id="maincontent">
<div id="sidemenu"></div>
</div>

<div id="footer"></div>

</body>
</html>

@charset "utf-8";
body {
font-family: Verdana, Arial, Helvetica, "Trebuchet MS";
font-size: 100%;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#header {
position:relative;
left:0px;
top:0px;
width:980px;
height:150px;
z-index:1;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #FFFF99;
}
#navbar {
position:relative;
left:0px;
top:0px;
height:35px;
z-index:2;
padding: 0px;
background-color: #CC3300;
margin: 0px;
width: 100%;
}
#sidemenu {
background-color: #99FF66;
position: absolute;
height: 600px;
width: 120px;
left: 0px;
top: 0px;
}

#maincontent {
position:relative;
left:0px;
top:0px;
width:980px;
height:600px;
z-index:3;
background-color: #CCCCFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding: 0px;
}
#footer {
position:relative;
left:0px;
width:100%;
height:100px;
z-index:4;
background-color: #FFCC00;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navbuttonbar {
background-color: #999999;
padding: 0px;
width: 980px;
margin-right: auto;
margin-left: auto;
z-index: 5;
height: 35px;
}

scrufffydoo
12-21-2008, 11:04 PM
scrap that, once I took a long look at the site I was trying to emulate I realised the footer is actually the page background and the navbar is in a wrap, hence the full width attributes.

should've engaged brain before operating keyboard :rolleyes:

coloeagle
12-21-2008, 11:08 PM
You have a set height for some div's. This height will not change as needed when going to a smaller browser. This causes the content to overflow the div. Try removing the height. Check the page.

In the meantime I will do a play around with your code as well.

scrufffydoo
12-21-2008, 11:20 PM
yeah I set some random heights and colours just for a visual guide while I sorted out the layout, these would be removed once the content is loaded. Im going to rehash this page in a similar way to the example site as it seems a simple way of getting the result I want, would be interesting to figure out why the full width div doesn't resize on scrolling though.

coloeagle
12-21-2008, 11:23 PM
I would still suggest that you place everything inside a main/wrapper div. This will help in controlling the layout/visual appearance you want.

coloeagle
12-21-2008, 11:25 PM
Example with your html from above;
<body>
<div id="wrap">

<div id="header"></div>

<div id="navbar">
<div id="navbuttonbar"></div>
</div>

<div id="maincontent">
<div id="sidemenu"></div>
</div>

<div id="footer"></div>

</div><!-- End wrap -->
</body>

coloeagle
12-21-2008, 11:31 PM
Another item to remember. When you have a div set to be 100% and it is not contained inside a parent control, it will be the full width of the browser and not any fixed width content.