Need with fixed width layout

Ceepop

09-06-2011, 12:16 AM

Edit: Whoops, meant to say "need HELP with fixed width layout"

I'm definitely new at coding and this problem has been plaguing me for days and I decided I needed help. In learning how to layout pages, I created a test page and cannot figure out why the "middle" and "right" portions of the code are appearing at the bottom of the "left" portion.

Here is the CSS

body {
background-color: rgb(59,61,69);
font-family: Georgia, Verdana, TimesNewRoman, Serif;
font-size: larger;
color: White;
}

div {
padding: 10px;
}

h1 {
font-family: 'Cantarell';
text-align: center;
font-size: 275%;
color: white;
background-color: rgb(95,135,168);
border-style: solid;
border-color: black;
border-width: 3px;
}

.body {
width: 800px;
margin-left: auto;
margin-right: auto;
}

.left {
float: left;
width: 100px;
background-color: orange;
border-width: 2px;
border-style: solid;
border-color: black;
margin: 8px;
font-weight: bold;
color: white;
text-align: center;
clear: both;
}

.middle {
float: left;
width: 450px;
text-align: center;

}

.right {
float: left;
width: 100px;
font-weight: bold;
}

Here is the HTML:

<!DOCTYPE html>

<html>

<head>
<title>Fixed width layout</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>

<h1> test website, centered, fixed width layout </h1> <br/>

<div class="body">

<div class="left">
<p> NAV BOX ONE</p>
</div>

<div class="left">
<p> NAV BOX TWO</p>
</div>
<div class="left">
<p> NAV BOX THREE</p>
</div>

<div class="middle">
<P>
Can someone tell me why THIS section is not lining up at the top of the page with the yellow boxes?
</P>
</div>

<div class="right">
Place an advertisement here
</div>

</div>
</body>

</html>

Thanks in advance!

M.Jackson

09-06-2011, 04:17 AM

Well, the answer to your question is that they are at the bottom because that's where they are in your code and there is no CSS that tells them to be elsewhere. Is it possible that you didn't post the .middle and .right part of the CSS?

Ceepop

09-06-2011, 12:52 PM

Hm. Missed the bottom few parts of my CSS code... sorry about that. I just re-edited. What CSS code could I use to move the .middle and .right parts up to the top of the page, right underneath the header?

Thanks!

M.Jackson

09-07-2011, 10:07 PM

Sorry for the delay in answering, work issues.

The short answer is, because it's in a div. Doing this tells the renderer that it's a completely different thing and thus it unable to affect or be affected by content in another div. Yeah, that's a simplified description.

The solution is to take the div tags around the text out, but that only fixes that one area. After a bit of playing, I think what you want is:

<!DOCTYPE html>

<html>

<head>
<title>Fixed width layout</title>
<style type="text/css">
body {
background-color: rgb(59,61,69);
font-family: Georgia, Verdana, TimesNewRoman, Serif;
font-size: larger;
color: White;
}

div {
padding: 10px;
}

h1 {
font-family: 'Cantarell';
text-align: center;
font-size: 275%;
color: white;
background-color: rgb(95,135,168);
border-style: solid;
border-color: black;
border-width: 3px;
}

.body {
width: 800px;
margin-left: auto;
margin-right: auto;
}

.left {
width:130px;
float:left;
}
.box {
width: 90px;
background-color: orange;
border-width: 2px;
border-style: solid;
border-color: black;
margin: 8px;
font-weight: bold;
color: white;
text-align: center;
clear: both;
}

.right {
float: right;
width: 100px;
font-weight: bold;
}
</style>
</head>
<body>

<h1> test website, centered, fixed width layout </h1> <br/>

<div class=body>
<div class="left">
<div class="box">
<p> NAV BOX ONE</p>
</div>

<div class="box">
<p> NAV BOX TWO</p>
</div>
<div class="box">
<p> NAV BOX THREE</p>
</div>
</div>

<div class="right">
Place an advertisement here
</div>

<p>Can someone tell me why THIS section is not lining up at the top of the page with the yellow boxes?
</p>

</div>

</body>

</html>

What I did, if i remember it all, is place all the contents that you want to go to the left in a single div that is "float:left;" at a width of 130px (to give a nice margin) then put your placeholder for ads on as a "float:right;" before finally adding your middle text area without any div container. All of that went inside your body div so as to pull it's sides in while not also affecting the header..

What this will do that you didn't say you were trying to do is push the text out to the full 800px after it has gone past the other elements. If you don't want that, just add your "middle" div back around it.

I feel like I changed a few other things, but can't remember. Just compare what you have to what I posted here.

Hope this helps.

PS: after I posted I noticed that it was now off center. To fix that, increase the width of "right" to equal "left" (130px in what I did),

Ceepop

09-08-2011, 12:43 PM

Thank you so much, your suggestion works.

I also figured out that I could solve the problem by reordering the content in the HTML portion.

This code also solved the problem:

<body>

<h1> test website, centered, fixed width layout </h1> <br/>

<div class="body">

<div class="left">
<p> NAV BOX ONE</p>
</div>

<div class="middle">
<P>
Why is THIS section is not lining up at the top of the page with the yellow boxes?
</P>
</div>

<div class="right">
Place an advertisement here
</div>

<div class="left">
<p> NAV BOX TWO</p>
</div>
<div class="left">
<p> NAV BOX THREE</p>
</div>

</div>
</body>

I don't know if this code might go on to cause problems later however.