CSS Forum

**worldy** · 06:34 PM

So Im starting to learn some CSS but I'm having trouble rendering my page layout the way I want it to in firefox (page looks as it is supposed to in internet explorer) This is the CSS where I'm having trouble...

HTML Code:

body {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Arial, Tahoma;
}

#content {
    width: 100%;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
    height: 1000px;
}

.article {
    width: 80%;
    float: left;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
    height: 1000px;
}

.sidebar {
    width: 20%;
    float: right;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
    clear: both;
    height: 1000px;
}

Now what I'm trying to do is have some content on the left side and have a sidebar on the right side (both positioned side by side), but in firefox the "sidebar" div shifts down and sits diagonally (south-east) to the "article" div. Any ideas how I can fix this?

**chrishirst** · 06-02-2010, 06:35 PM

CSS is no use without the HTML it styles!

**UUilliam** · 06-02-2010, 07:58 PM

I done the exact same thing when I first ventured to css
thanks to chris, I got it fixed by defining my document type

add this to the top of your html page

<!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">

**worldy** · 06-03-2010, 03:31 PM

So this is the html I have thus far (its just the template I'm creating) But the problems still persists in Firefox.

<!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">
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<title>Title</title>
</head>
<body>

<div id="header">
</div>

<div id="content">
<div class="article">
</div>
<div class="sidebar">
</div>
</div>

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

</body>
</html>

**chrishirst** · 06-03-2010, 04:40 PM

you can't float:right and clear:both on the same element.

if your "sidebar" is going to "float" to the right of "article" it MUST precede it in the document flow.

**worldy** · 06-03-2010, 05:47 PM

Well that worked! Cheers