CSS layout issue

Danis[h] · Apr 28, 2010

I've used Divs to style a new website layout I am working on.
I have however encountered a problem:

http://www.bc.silwing.dk/guild

If you open the site in firefox, the content box's background does not stretch to fit the div it's containing when the text goes over its bounds.

However if you open it in internet explorer, it does..

Can anyone help me solve my css/divs so that the content does stretch. I made the two divs inside the content body to make "columns" for the different text.

My stylesheet is as follows:

Code:

body				{
						background-color:					black;
						padding:							0px;
						margin:								0px;
					}
.upper				
					{
						background-color:					white;
						background-image:					url("../images/upper.jpg");
						background-repeat:					repeat-x;
						position:							relative;
						top:								0px;
						width:								100%;
						height:								30px;
						text-align:							center;
						color:								#fbba6d;
						font-size:							14pt;
						font-weight:						bold;
					}

.upper a			
					{
						color:								#fbba6d;
						text-decoration:					none;
						display:							inline;
					}

.upper a:hover		
					{
						text-decoration:					underline;
					}

.content			
					{
						width:								916px;
						margin:								auto;
						position:							relative;
					}

.header				
					{
						background-image:					url("../images/header.jpg");
						background-repeat:					no-repeat;
						width:								916px;
						height:								175px;
						position:							relative;
					}
					
.grad-left
					{
						background-image:					url("../images/side-gradiant.jpg");
						background-repeat:					repeat-y;
						width:								169px;
						height:								100%;
						position:							absolute;
						left:								0px;
						z-index:							-1;
					}

.grad-right
					{
						background-image:					url("../images/side-gradiant.jpg");
						background-repeat:					repeat-y;
						width:								169px;
						height:								100%;
						background-color:					white;
						position:							absolute;
						right:								0px;
						z-index:							-1;
					}
.cont-body
					{
						background-color:					white;
						background-image:					url("../images/body-bg.jpg");
						min-height:							600px;
						width:								916px;
						background-repeat:					repeat-y;
						position:							relative;
					}
.main-cont
					{
						position:							relative;
						border-right:						3px solid #1c1a1a;
						width:								550px;
						min-height:							600px;
						height:								100%;
						float:								left;
						color:								white;
						font-size:							12pt;
					}
.second-cont
					{
						position:							relative;
						float:								left;
						min-height:							600px;
						width:								357px;
						color:								white;
						font-size:							12pt;
					}

p					
					{
						padding-left:						10px;
						padding-right:						10px;
					}		
					
.footer
					{
						position:							relative;
						width:								916px;
						height:								30px;
						background-image:					url("../images/footer.jpg");
						background-repeat:					repeat-x;
					}
					
h1
					{
						color:								#497ddb;
						width:								400px;
						font-size:							26pt;
						padding-left:						12px;
						margin:								8px;
						font-family:						arial narrow;
					}
					
h2
					{
						color:								#497ddb;
						width:								200px;
						font-size:							20pt;
						padding-left:						10px;
						margin:								8px;
						font-family:						arial narrow;
					}

and my HTML

Code:

<!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 http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Telariev" />
	<link rel="stylesheet" type="text/css" href="include/style.css" />
	<title>Evanescent</title>
</head>

<body>

<div class="grad-left">
</div>
<div class="grad-right">
</div>

	<div class="upper">
		<a href="#"> Home </a> | <a href="#"> Link 1 </a> | <a href="#"> Link 2 </a> | <a href="#"> Link 3 </a> | <a href="#"> Link 4 </a> | 
		<a href="#"> Link 5 </a> | <a href="#"> Link 6 </a> 
	</div>
	<div class="content">
		
		<div class="header">
		</div>
		
		<div class="cont-body">
			<div class="main-cont">
				<h1>Innocuous title</h1>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
				<h1>Another Title</h1>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur<br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa sectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
			</div>
			
			<div class="second-cont">
				<h2>Latest News</h2>
				<p>Sed ut perspiciatis ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur<br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim </p>
			</div>
		</div>
		
		<div class="footer">
		</div>
	</div>
</body>
</html>

Update:
There is also the issue of the small images (that are to be replaced by some repeating pattern) out in the left and right side doesn't continue down when the page becomes longer from the content.

monoVertex · Apr 28, 2010

You need to remove the fixed height on the respective divs. Also, remove the 100% height on the divs that contain your background image.

In Firefox, there is a way to specify a minimum height and the div will stretch, if the text goes over that height, but that is not supported by IE.

However, if the text is not longer than the page's height, the background will not go all the way to the bottom. If you want a full-page background, make a seamless pattern and use it as a background-image on the body element.

UndeadDragon · Apr 28, 2010

The use of absolute positions will mean that the footer div will not move further down the page when the text reaches it.

Danis[h] · Apr 28, 2010

UndeadDragon said:
The use of absolute positions will mean that the footer div will not move further down the page when the text reaches it.

the footer is position: relative though

Also these are the three divs that are causing the problem

Code:

.cont-body
					{
						background-color:					white;
						background-image:					url("../images/body-bg.jpg");
						min-height:							600px;
						width:								916px;
						background-repeat:					repeat-y;
						position:							relative;
					}
.main-cont
					{
						position:							relative;
						border-right:						3px solid #1c1a1a;
						width:								550px;
						min-height:							600px;
						height:								100%;
						float:								left;
						color:								white;
						font-size:							12pt;
					}
.second-cont
					{
						position:							relative;
						float:								left;
						min-height:							600px;
						width:								357px;
						color:								white;
						font-size:							12pt;
					}

What I've done is that I have put .cont-body in for the background image and within .cont-body I use .main-cont and .seond-cont to control the text columns layout.
However when .main-cont becomes longer than .cont-body... cont-body doesn't stretch to fit.

UndeadDragon · Apr 28, 2010

Danis[h] said:
the footer is position: relative though

Oh sorry, I missed all the values, because they are tabbed extremely far to the right

phyrex1an · Apr 29, 2010

Add "clear: both;" to the .footer and add "float: left;" to the .cont-body. That should do it. You can remove the relative positioning on pretty much everything. If you want a more solid solution you should check out the various 2 column layout tutorials on the web.

Danis[h] · Apr 29, 2010

phyrex1an said:
Add "clear: both;" to the .footer and add "float: left;" to the .cont-body. That should do it. You can remove the relative positioning on pretty much everything. If you want a more solid solution you should check out the various 2 column layout tutorials on the web.

Thank you, this solved the issue!
Could you elaborate on what you mean by more solid solution? I'm still new to the whole CSS layout thing.

phyrex1an · Apr 29, 2010

Danis[h] said:
Could you elaborate on what you mean by more solid solution? I'm still new to the whole CSS layout thing.

It seems like your current css has been developed using the "throw stuff at it until it works" methodology (eg, most of the relative positioning doesn't have any effect). Nothing wrong with that when you're learning, but if you want something that is expected to work on many browsers then you need something that's not working by a coincidence (and a little help).

Magentix · May 1, 2010

A nice addition: If you want to have a minimum height that's crossbrowser, use this:

Code:

div#someDiv {
    height: THE_HEIGHT px;
    height: auto !important;
    min-height: THE_HEIGHT px;
}

CSS layout issue

Danis[h]

New Member

monoVertex

I'm back!

UndeadDragon

Super Moderator

Danis[h]

New Member

UndeadDragon

Super Moderator

phyrex1an

Staff Member and irregular helper

Danis[h]

New Member

phyrex1an

Staff Member and irregular helper

Magentix

if (OP.statement == false) postCount++;

Settings Notifications

Options

The Helper Discord

Members online

Share this page

Affiliates

Network Sponsors

CSS layout issue

New Member

I'm back!

Super Moderator

New Member

Super Moderator

Staff Member and irregular helper

New Member

Staff Member and irregular helper

if (OP.statement == false) postCount++;

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors