Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- divs just not going where I want

birdbrain - 11:04 am on Nov 2, 2009 (gmt 0)


Hi there callivert,

try this, it should get you moving in the right direction...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>my website</title>

<style type="text/css">
body {
margin:0;
padding:0;
background-color:#efe;
font-family:ariel,sans-serif;
font-size:0.9em;
}

#wrapper {
width:784px;
height:1%;
padding:8px;
border:2px solid #008000;
margin:10px auto;
color:#000;
background-color:#ded;
overflow:hidden;
}

#header {
padding:8px;
border:2px solid #008000;
background-color:#fcfcfc;
}

#navbar {
padding:8px;
border:2px solid #008000;
margin:8px 0;
background-color:#fcfcfc;
}

#leftcol {
float:left;
width:156px;
padding:8px;
border:2px solid #f00;
margin-right:8px;
background-color:#fcfcfc;
}

#advert {
float:left;
width:184px;
padding:8px;
border:2px solid #00f;
margin-right:8px;
background-color:#fcfcfc;
}

#contentstuff {
float:left;
width:368px;
padding:8px;
border:2px solid #ffa500;
background-color:#fcfcfc;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header">
<h1>A cool website</h1>
<p>with very cool content</p>
</div>

<div id="navbar">
This is the navbar.
</div>

<div id="leftcol">
<p>QuickLinks</p>
<p>
here are lots of links. here are lots of links.
here are lots of links. here are lots of links.
here are lots of links. here are lots of links.
</p>
</div>

<div id="advert">
<h3>An advertisement</h3>
</div>

<div id="contentstuff">
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
</div>

</div>

</body>
</html>


birdbrain

Thread source:: http://www.webmasterworld.com/css/4017424.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com