XHTML + CSS help needed

D

DexterMorgan

A Smooth-Skin
Ok, I'm trying to build a webpage based on XHTML and CSS and I have a problem. Here's the code:

XHTML
<!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=utf-8" />
<title>bla</title>
<link href="styles.css" rel="stylesheet" type="text/css" /></head>

<body>

<div id="wrapper">

<div id="header">

</div>

<div id="sidebar">

</div>

<div id="content">

<h1>test</h1>

</div>

<div id="footer">

</div>

</div>

</body>
</html>
Click to expand...

CSS
@charset "utf-8";

body
{
background: #000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: medium;
}

#wrapper
{
width: 800px;
border: #FFF thin dotted;
background: #FFF;
margin: auto;
}

#header
{
background-image:url(images/header.png);
width: 800px;
height: 100px;
}

#content
{
float: right;
width: 644px;
padding: 3px;
}

#sidebar
{
float: left;
width: 144px;
padding: 3px;
}
Click to expand...

Problem is, the "wrapper" tag, which is supposed to contain all other elements (header, sidebar, content, footer) doesn't stretch when I add, for example, some text under "content". Thing is, the text is displayed correctly under the header image but is invisible because wrapper and its white background definition didn't stretch.

Any coders out there?
 
It's because your sidebar and content elements are float right and left. This makes them non-solid.

You don't need float left in the sidebar box.

/Edit: Because of some unknown reason, the forum is eating the header information in my post.

index.html:
Code: 
<DOCTYPE>
<html>
<head>
<meta>
<title>bla</title>
<link></head> 

<body>
	<div id="wrapper">
		<div id="header">
			Header
		</div>

		<div id="content">
			<h1>test</h1>
			

Some Text</p>
		</div>
		
		<div id="sidebar">
			<ul>
				[*]link 1
				[*]link 2
				[*]link 3
				[*]link 4
				[*]link 5
				[*]link 6
			[/list]
		</div>

		<div id="footer">
			Footer
		</div>

	</div>
</body>
</html>

Styles.css:
Code: 
@charset "utf-8"; 

body {
background-color: #000541;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: medium;
	}

#wrapper {
width: 800px;
border: #FFF thin dotted;
background-color: #123;
margin: auto;
	}

#header {
background-image:url(images/header.png);
width: 800px;
height: 100px;
background-color: #321;
	}

#content {
float: right;
width: 644px;
padding: 3px;
background-color: #444;
	}

#sidebar {
width: 144px;
padding: 3px;
background-color: #453;
	}

I've added some background colors to the elements, so you can see them better in the html page.
 
I see what you mean and thanks, but instead I just set "footer" to clear: both which keeps it away from both sidebar and content...
 
You must log in or register to reply here.
Back
Top