Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
html, body {
background-color: #000000;
margin: 0px;
padding: 0;
}
#container {
background-color: #333333;
/*height: 1000px; /*REMOVE THIS TAG*/
width: 700px;
margin: auto;
padding: 0px;
}
#contentwrapper {
float: left;
width: 100%;
}
#header {
background-color: #808080;
height: 90px;
width: 700px;
margin: auto;
padding-right: 25px;
}
#content {
float: left;
background-color: #808080;
height: 300px;
width: 460px;
margin: 5px;
padding: 4px;
}
#sidebar {
float: left;
background-color: #808080;
height: 90px;
width: 200px;
margin-left: 250px;
padding: 7px;
}
h1 {
color: #333333;
font-style: normal;
font-weight: bold;
font-size: 24px;
font-family: arial;
}
</style>
</head>
<body>
<div id="container">
<div id="wrap">
<div id="header"> image links in header</div>
<div id="content"><h1>main content --published so I can get help on my css</h1></div>
<div id="sidebar"><h1>sidebar</h1></div>
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 8:47 am (utc) on July 22, 2007]
[edit reason] examplified and HTML code added [/edit]
Marshall
I went to your page and it is already wonderfully simplified, and valid, for an example so I amended your code sample in OP to include the HTML and only the relevant CSS, as I had to remove your link per TOS - hope that's OK
-----
There are quite a few wee things that are going on and you might benefit from the help if others chip in with the bits they spot.
My 2C is if you're new to CSS make sure you get to grips with the Box Model [webmasterworld.com] first! this is not nearly as complex at it reads but simply put and in relation to your code.. your container is set at 700px wide then the header which is inside it is set at 700px wide and also to have 25px right padding.. this is going to make the header 725px wide so it will stick out of the container.. not a big issue perhaps but things like this will get you as you try to align things ;)
The simple solution for the above case is not to specify a width on the header, it is a block level, in flow element and so will automatically become 100% of it's parent
as to your question about floats you do not need the large margin on the sidebar - if you remove it it should then be able to slot into the space beside the content div - you can then swap which side you want it on by changing the float direction of the "content" div and also if you want the sidebar to align perfectly to the right - float it right instead of left with margins it helps layouts if they have very little calculations to do!
HTH just now
Suzy
