Hey there! I'm in the process of designing/coding my first blog by hand. What I'm trying to do, is set the height of the content AND content wrapper divs based on the height of the actual post length.
here's my code:
obviously, I've removed some stuff to make it easier for you. Here's the part of my CSS this problem concerns:
If you need anything else, tell me. Other than that, this is my first time with ALL of this (HTML, Javascript, CSS) so please be gentle
Thanks for the help!
-iMaster
here's my code:
Code:
<html>
<head>
<!DOCTYPE HTML>
<LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
<title>Blog Post</title>
</head>
<body>
<script type="text/javascript">
window.onload = setHeight;
function setHeight() {
var pageWrap = document.getElementById('content_wrapper')
var page = document.getElementById('content')
var p = document.getElementById('post')
var ph = p.offsetHeight
page.style.height = ph + 50 + 'px';
pageWrap.style.height = ph + 50 + 'px';
</script>
...
<!--Main page (under navigation)-->
<div id = content_wrapper>
<div id= content>
...
<div id = post>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla consequat sollicitudin. Phasellus nec risus nibh, ut vestibulum ipsum. Vestibulum id est massa. Donec ultricies ullamcorper mi, et ultricies tortor bibendum ut. Morbi eget nisl a nisi elementum sollicitudin. Mauris ut dolor libero, rutrum tristique eros. Maecenas eu mauris quis urna pellentesque bibendum sit amet eu ipsum. Cras posuere lacinia tristique. Praesent sagittis vestibulum nisi eu gravida. Aliquam commodo congue adipiscing. Sed pellentesque tempor arcu, et euismod erat lacinia at. Etiam volutpat mollis fringilla. Aliquam libero neque, pulvinar ac consequat eu, vestibulum vitae eros. Ut a hendrerit nisi. Nam sagittis luctus lectus bibendum vulputate. Sed sed est tellus. Aliquam nisl enim, viverra vel congue nec, aliquet et tortor. Pellentesque enim est, scelerisque ut dictum a, dapibus sed nisl. Vestibulum cursus tellus leo.
<br> <br>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci velit, porta vel lobortis et, vulputate tincidunt velit. Donec facilisis semper lacus porttitor fringilla. Aliquam vel dolor est, at posuere augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac viverra mi. Sed imperdiet ligula nec nibh semper gravida. Mauris posuere, nunc eu hendrerit commodo, dui erat facilisis elit, vel vestibulum libero diam id erat. Nullam in urna id dui pretium sodales in eget tellus. Sed nibh velit, condimentum eget molestie vel, bibendum vitae magna.
<br> <br>
In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
<br> <br>
In in massa ligula, eleifend pharetra elit. Maecenas tincidunt, odio sed tempus mattis, elit tellus mollis neque, in consectetur diam turpis vel neque. Nunc fringilla tempus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan, augue vitae fermentum ullamcorper, risus est scelerisque urna, id congue tortor odio vel orci. Donec suscipit auctor lacinia. In imperdiet magna ac risus mattis luctus bibendum at est. Proin condimentum varius neque accumsan condimentum. Mauris vulputate dictum eros, quis suscipit velit vehicula et. Vivamus vitae bibendum dui. Mauris tincidunt sollicitudin justo ut tincidunt. Nunc porta ultrices volutpat. Etiam in mattis neque. Sed a felis tempor nunc adipiscing malesuada
</div>
</div>
...
</div>
</body>
</html>obviously, I've removed some stuff to make it easier for you. Here's the part of my CSS this problem concerns:
Code:
#content_wrapper {
float: left;
width: 100%;
height: 720px;
float: left;
background-color: #CCCCCC;
}
#content {
width: 960px;
height: 720px;
margin: 0 auto;
}If you need anything else, tell me. Other than that, this is my first time with ALL of this (HTML, Javascript, CSS) so please be gentle
Thanks for the help!-iMaster
