Menu
I am currently trying to design a website template for me, the problem is that I can't get the Content div to auto expand on the content that is within it.
I wanted it to auto resize so I don't need to set the CSS height manually.
The CSS Code I have made:
#Container {
position: relative;
width: 800px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
border-bottom: 1px solid #000001;
background-color: #C1E9FF;
}
#LogoContainer {
background-image: url('/media/Logo.png');
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: rgb(0,0,1);
border-bottom-color: rgb(0,0,1);
border-right-style: solid;
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
z-index: 1;
}
#LikeBar {
border-bottom-width: 1px;
border-bottom-color: rgb(0,0,1);
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
left: 400px;
z-index: 1;
}
#ButtonHome {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
top: 50px;
z-index: 1;
}
#ButtonVideo {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
left: 105;
top: 50px;
z-index: 1;
}
#Footer {
border-top-width: 1px;
border-top-color: rgb(0,0,1);
border-top-style: solid;
width: 800px;
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
}
#Content {
position: absolute;
top: 90px;
width: 800px;
height: 95%;
border-top: 1px solid #000001;
}
#YouTubeBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 10px;
text-align: center;
}
#TwitterBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 110px;
text-align: center;
}
#FaceBookBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 210px;
text-align: center;
}
.DivT { line-height: 1px }
HTML Code with the DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>HTML CODE</title>
<meta name="description" content="Null" />
<meta name="keywords" content="Null" />
<link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>
<body background="/media/Background.png">
<div id="Container">
<!-- Start Container -->
<div id="LogoContainer"></div>
<div id="LikeBar"></div><!-- Menu Controls -->
<div id="ButtonHome"></div><!-- WEBSITE CONTENT -->
<div id="Content">
<p class="DivT">We're upgrading the website with a new design and hopefully it will
be faster, so check back later.</p>
</div><!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer"></div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>
So, what is wrong? I want to save time to not set the height manually.
526
Since your div#Content is absolutely positioned within div#Container, the container will ignore the height and width of the content when determining its own dimensions. Try giving div#Content a position value of relative. Then, as mentioned in the comments above, switch its height property to min-height. If you need to stick with absolute positioning and still want a content-affected height, you'll have to use JavaScript to adjust the style.height of the containing div when the height of the content div changes.
177
It looks like you have set the height of your content height manually:
#Content {
...
height: 95%;
Remove the height, and its height will be whatever is necessary to hold its (non-floated) contents.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
