Hello,
I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline & embedded CSS just now as It's just a quick test page I'm working on. Basically I've got my container div, two other div columns inside with fixed widths. In the 2nd column I have 2 divs, one is under the other, which exceeds the size of the browser. Anyway, that's fine, but the containerdiv doesn't expand by the browser size. I want it to go right down and expand to whatever, but it won't.
Some solutions I've tried:
. Adding an extra div with clear:both
. Adding overflow:hidden in the container (It hides the rest of the browser and doesn't let me scroll down)
. Taking the height:100% attribute out of the body, the container and html selectors to see if it extends automatically
No luck on all costs. The container div is just stoppping at the size of the browser, doesn't go underneath when i scroll.
Here's my code:
I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline & embedded CSS just now as It's just a quick test page I'm working on. Basically I've got my container div, two other div columns inside with fixed widths. In the 2nd column I have 2 divs, one is under the other, which exceeds the size of the browser. Anyway, that's fine, but the containerdiv doesn't expand by the browser size. I want it to go right down and expand to whatever, but it won't.
Some solutions I've tried:
. Adding an extra div with clear:both
. Adding overflow:hidden in the container (It hides the rest of the browser and doesn't let me scroll down)
. Taking the height:100% attribute out of the body, the container and html selectors to see if it extends automatically
No luck on all costs. The container div is just stoppping at the size of the browser, doesn't go underneath when i scroll.
Here's my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sfkdgbgdsf</title>
<style type="text/css">
html {
height:100%;
}
.funkybox {
background-color:black;
color:gray;
border-style:thin solid;
border-width:1px;
border-color:red;
}
.boxbg {
background-color:black;
color:gray;
}
</style>
</head>
<body style="height:100%; margin-top:0px; margin-bottom:0px; background-color:#262626; text-align:center; color:white;">
<div id="container" style="width:900px; height:100%; margin-left:auto; margin-right:auto; background-color:black; background-position:center;">
<div style="height:6px;"></div>
<div id="heading" style="font-family:'times roman', arial, verdana; font-size:1.5em; width:886px; height:50px; border-style:solid; background-position:center; margin-left:auto; margin-right:auto; border-color:gray; border-width:1px; background-color:#262626; color:yellow; filter:alpha; opacity:60%; font-weight:normal; text-align:center; margin-bottom:10px; x; text-decoration:underline; padding-top:8px;">Andrew's CSS Test Page</div>
<div id="left column" style="width:125px; float:left; margin-left:14px;">
<div id="menu" style="width:125px; height:267px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; ">
[B]Content
[/B]
<div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
[B] Content[/B]
</div>
<div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
[B] Content[/B]
</div>
<div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
[B] Content[/B]
</div>
</div>
<div id="middle column" style="width:700; margin-left:10px; margin-bottom:0px; float:left; text-align:left;">
<div style="width:590px; background-color:black; color:white; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; padding:5px; line-height:25px;">
[B] Content[/B]
</div>
<div style="width:200px; height:200px; background-color:white;">
</div>
</div>
</div>
</body>
</html>
Comment