CSS Stretchamajiggy Thingy

wheres me jumpa · 17-04-2006 10:19am #1

Guys,

Trying to go all out css. Have come up with a simple design.

Container to hold all
Header div
Nav div
Content area about 70% wide
Additional nav area beside content area, about 30% wide
Content cells within the content area
Footer div

I have it looking fine in IE and FF which took an eternity and some cowboy coding. What I want is to have the design so that everything stretches as content is added. At the moment I can add content and adjust the height settings if needs be but this is not the ideal.

So I want the content cells to stretch which in turn will stretch the content area and in turn will stretch the container div. Heres my css....

/* Layout Stylesheet */ 
body{
 margin: 20px;
 background:#3E5F68;
 text-align: center;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 }	
 
#container{
 width: 750px;
 height:560px;
 background-color: #FFFFFF;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 display:block;
 }

#header{
 position:relative;
 display: block;
 width: 740px;
 height: 160px;
 background-color:#00829A;
 top: 5px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 5px;
 background-image:url(../images/swirl.jpg);
 background-repeat:no-repeat;
 background-position:left;
 }

#navBar{
 width: 740px;
 background-color: #BCE21D;
 float: left;
 height: 30px;
 position: relative;
 top: 5px;
 left: 5px;

 }	
 
#content{
 width: 545px;
 background-color: #E5E4F;
 position: relative;
 float:left;
 top: 5px;
 }

#rightCol{
 width:185px;
 height: 315px;
 background-color:#DDDCCA;
 position:relative;
 float:left;
 margin-top: 5px;
 margin-left: 5px;
 top: 5px;
 padding: 5px;
 }

#contentCell{
 position:relative;
 text-align: justify;
 width:530px;
 height: 150px;
 background-color:#E5E4DF;
 margin-top: 5px;
 margin-left: 5px;
 padding: 5px;
}

#footer{
 width:740px;
 height: 20px;
 background-color:#80ACB5;
 position: relative;
 float:left;
 margin-top:5px;
 left: 5px;
 top: 5px;
 vertical-align:middle;
 }

Gordon · 17-04-2006 10:27am

iirc you put - overflow: auto; into the div you want to stretch/the parent div.

wheres me jumpa · 17-04-2006 10:42am

Thanks Gordon,

That has solved it but it just adds a scroll bar. Even if i could just get the container div to stretch id be happy. If I dont sett heheight in the container div it just gives a tiny bar at the top of the screen behind the other divs.

Gordon · 17-04-2006 11:07am

Can you post the HTML?

wheres me jumpa · 17-04-2006 2:56pm

Gordon wrote:

Can you post the HTML?

Yeah sure.

<body>

<!-- CONTAINER -->
<div id="container">

<!-- HEADER -->
<div id="header">
<div align="right"><img src="images/logo.jpg" alt="Logo"/></div>
</div>
<!-- END HEADER -->

<!-- NAVIGATION BAR-->
<div id="navBar">

</div>
<!-- END NAVIGATION BAR-->

<!-- CONTENT AREA -->
<div id="content">

	<!-- CONTENT CELL -->
	<div id="contentCell">
	:: Headline
	<br />
	<br />
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas rhoncus fringilla lectus. Curabitur consectetuer, elit in bibendum auctor, turpis risus vehicula ante, a laoreet felis lorem sit amet nulla. Suspendisse volutpat consequat lacus. Cras lobortis enim vel ipsum. Vestibulum id dui eget risus tristique condimentum. Pellentesque nec sapien. Phasellus blandit leo quis ante. Nulla facilisi. Duis ligula sem, consequat ac, feugiat in, vehicula et, ante. Integer bibendum augue quis risus. Nunc convallis mi vitae augue.
	
	<br />
	<br />
	:: Headline
	<br />
	<br />
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas rhoncus fringilla lectus. Curabitur consectetuer, elit in bibendum auctor, turpis risus vehicula ante, a laoreet felis lorem sit amet nulla. Suspendisse volutpat consequat lacus. Cras lobortis enim vel ipsum. Vestibulum id dui eget risus tristique condimentum. Pellentesque nec sapien. Phasellus blandit leo quis ante. Nulla facilisi. Duis ligula sem, consequat ac, feugiat in, vehicula et, ante. Integer bibendum augue quis risus. Nunc convallis mi vitae augue.
	
	</div>
	<!-- END CONTENT -->
	<!-- CONTENT CELL -->
	<div id="contentCell">
	
	</div>
	<!-- END CONTENT CELL-->

</div>
<!-- END CONTENT AREA -->

<!-- RIGHT COLUMN -->
<div id="rightCol">
test
</div>
<!-- END RIGHT COLUMN -->

<!-- FOOTER -->
<div id="footer">
<img src="images/w3c_xhtml.gif" alt="Check Code"/>
</div>
<!-- END FOOTER -->

</div>
<!-- END CONTAINER -->



</body>

mewso · 17-04-2006 5:19pm

Heres an alternative stylesheet:

/* Layout Stylesheet */ 
body{
 margin: 20px;
 background:#3E5F68;
 text-align: center;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 }    
 
#container{
 width: 750px;
 background-color: #FFFFFF;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 padding:5px;
 }

#header{
 height: 160px;
 background-color:#00829A;
 background-image:url(../images/swirl.jpg);
 background-repeat:no-repeat;
 background-position:left;
 }

#navBar{
 background-color: #BCE21D;
 height: 30px;
 }    
 
#content{
 width: 545px;
 background-color: #E5E4F;
 float:left;
 }

#rightCol{
 width:185px;
 height: 315px;
 background-color:#DDDCCA;
 float:left;
 margin-top: 5px;
 margin-left: 5px;
 padding: 5px;
 }

#contentCell{
 text-align: justify;
 width:530px;
 background-color:#E5E4DF;
 margin-top: 5px;
 margin-left: 5px;
 padding: 5px;
}

#footer{
 height: 20px;
 background-color:#80ACB5;
 margin-top:5px;
 vertical-align:middle;
 clear:both;
 }

Making the footer clear both means you don't need height settings in your content divs but you were using relative positioning for most divs which kind of throws things. I removed that and just used padding in the container div to control how the elements within fit into it.

wheres me jumpa · 17-04-2006 5:26pm

Great stuff Musician.

Its working a treat.

Thanks,

Jumpa

CSS Stretchamajiggy Thingy

Comments