CSS Alignment has me screaming

**F12 Media** · 04-05-2007, 03:18 PM

Today I am working on a clients frontpage and the CSS alignment I normally have no problems with is giving me alot of difficulty.

The entire page is aligned in CSS div's and for the main content section I have a sidebar that will not match up with the content area at all.

Here is a copy of the code:

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Anime Influenced</title>
<style type="text/css" media="screen">
/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
 margin:0;
 padding:0;
 height:100%; /* needed for container min-height */
 background:#ffffff;
 background-image: url(image_04.gif);
 background-repeat: repeat-x;
 
 font-family:arial,sans-serif;
 font-size:small;
 color:#eeeeee;
}
h1 { 
 font:1.5em georgia,serif; 
 margin:0.5em 0;
}
h2 {
 font:1.25em georgia,serif; 
 margin:0 0 0.5em;
}
 h1, h2, a {
  color:#eeeeee;
 }
p { 
 line-height:1.5; 
 margin:0 0 1em;
}
div#container {
 position:relative; /* needed for footer positioning*/
 margin:0 auto; /* center, not in IE5 */
 width:690px;
 background:#2d2d2d;
 
 height:auto !important; /* real browsers */
 height:100%; /* IE6: treaded as min-height*/
 min-height:100%; /* real browsers */
}
div#header {
 padding:0em;
 background:#2d2d2d url("../csslayout.gif") 98% 10px no-repeat;
 width:100%;
 height:50px;
}
 div#header p {
  font-style:italic;
  font-size:1.1em;
  margin:0;
 }
div#side {
 width:228px;
 height:100%;
 padding:1em;
 background:#0c0c0c;
}
div#content {
 padding:0em 0em 0em; /* bottom padding for footer */
}
 div#content p {
  text-align:justify;
  padding:0 1em;
 }
div#contentsub {
 padding:0em;
 background:#ffffff;
 width:435px;
}

div#footer {
 position:absolute;
 width:100%;
 bottom:0; /* stick to bottom */
 background:#ffffff;
}
 div#footer p {
  padding:1em;
  margin:0;
 }
a.info{
    position:relative; /*this is the key*/
    z-index:24;
    text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #000000;
    background-color:#ffffff; color:#534834;
    text-align: center}
</style>
</head>
<body> 
<div id="container">
<div id="header">
<img src="images/image_20.gif" align="left"><img src="images/nav_02.gif" align="left"><img src="images/nav_04.gif" align="left"><img src="images/nav_06.gif" align="left"><img src="images/nav_08.gif" align="left">
<img src="images/image_02.gif" align="right">
</div>
<div id="content">
<img src="images/image_15.gif"><img src="images/image_19.gif">
</div>
<div align="right">
<div id="contentsub" align="left">
test
</div>
</div>
<div align="left">
<div id="side" align="center">
<img src="images/image_23.gif">
<b>Anime and Manga posted and updated daily.</b>
<br />
<br />
<br />
<img src="images/image_27.gif">
<b>Active Members and Discussions.</b>
</div>
</div>

</div>
 

</body>
</html>

This code results in this.

The content section has been changed to white so I could spot it easier. The point is to have both of those aligned side by side so as text can be added without distortion, I've already found a way to align them but text causes extreme changes in everythings position.

Thanks everyone for any help you can lend me.

**LadynRed** · 03:54 PM

Ok.. your problem is the contentsub div. It is a white box sitting under the header and it has nothing in it and no height defined.

I would recommend you do the following:
- take out stuff like "align=right" in the html. That kind of thing needs to go into the CSS and it is definitely NOT allowed in XHTML. If you want that div on the right, use float: right instead. Make sure you clear the float after you close the container.

- wrapping your content inside an unstlyed <div> is pointless and will cause you problems are you are creating boxes with default properties.
- there is no such thing as 'align = "center"'

You really don't need (or want) to set the footer in as position:absolute.

**F12 Media** · 04-05-2007, 04:06 PM

Ah! Thank you. I was never aware of float before, I am quite new to CSS driven templates, I used to spend hours bending tables to my will

I've also made the other changes you have suggested.