...

View Full Version : CSS 3 Column Layout issue



jweb
09-16-2011, 02:46 AM
Hello, I am hoping someone on these forums can help me. I am new to writing CSS.

I've got a 3 column layout that I created and it looks correct until I zoom out a few clicks in Firefox, then the #rightnav column drops out of place and falls down below the #leftnav.

Note: I tried zooming out like this in IE & Opera and everything stays correct no matter how much I zoom. So it's just Firefox that's messing up but I want to fix.

Here's the CSS:



#container {
width: 960px;
margin-left: auto;
margin-right: auto;
}

#header {
height:100px;
background-color:#CC9966;
border-style: solid;
border-width: 1px;
border-color: black;
}

h1 {
color:black;
text-indent:15px;
}

#menu {
background-color: #8B4513;
height: 30px;
width: 100%;
}

#menu ul {
margin-left: -2.5em;
}

#menu li {
list-style-type: none;
float:left;
width: 200px;
height: 30px;
}

#menu a {
display: block;
font-weight:bold;
color:#CC9966;
background-color:#8B4513;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding-top: 5px;
}

#menu a:hover {
background-color: black;
height: 30px;
}

#leftnav {
float:left;
width: 130px;
height:800px;
background-color: #CC9966;
border-style: solid;
border-color: black;
border-width: 1px;
border-top: none;
border-bottom:none;
text-align: center;
padding: 15px;
}

#rightnav {
float: left;
width: 130px;
height:800px;
background-color: #CC9966;
border-style: solid;
border-color: black;
border-width: 1px;
border-top:none;
border-bottom:none;
text-align: center;
padding: 15px;

}

#body {
float:left;
width: 605px;
height:800px;
text-align:center;
color: black;
background-color: #EDC393;
padding:15px;

}


#footer {
clear:both;
text-align:center;
background-color: #CC9966;
border-style: solid;
border-width: 1px;
}



And the XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>CSS Experiment Website - Total Awesomeness yea</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header"><h1>First Experiment Website Made From Scratch. </h1>
<div id= "menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>

<div id="leftnav"> This is the left nav</div>

<div id="body"> First Experiment Website Made From Scratch. Yes, I wrote the code. <p> I've got a lovely bunch of coconuts, deedlee. There they are a standing in a row. Bumpa bumpa bumpa bumpa...big ones, small ones, some as big as your head. Since you took the time to come look at this site, Please fill out the questionaire below: </p>

<h2>Website Survey / Feedback</h2>
<form action = "">
<fieldset>
<legend>Tell Us What You Think</legend>
<p>
<label>Name</label>
<input type= "text"
id = "txtname" />
</p>
<p>
<label>E-mail Address</label>
<input type= "text"
id = "txtemail" />
</p>

<p>
<label>Why Did You Visit this Website?</label>
<select id = "reason">
<option value = "like">I really like it</option>
<option value = "referred">Someone told me to</option>
</select>
</p>
<p>
<label> Questions or Comments? Let us know:</label>
</p>
<p>
<textarea id = "txtAnswer"
rows = "10"
cols = "40"></textarea>
</p>
<p> <input type = "submit"
value = "Submit" /> </p>
</fieldset>
</form> To prove the validation of this website, just <a href = "http://validator.w3.org">Click Here </a>
</div>
<div id="rightnav"> To prove the validation of this website, <a href = "http://validator.w3.org">Click Here </a>This is the right nav.</div>
<div id="footer"> Copyright 2011 Janette Jafary</div>

</div>

</body>
</html>


What can I do? Help is much appreciated, thank you!!!

PS. I tried changing the #rightnav to float right instead of float left, but that just created an unwanted space between columns and I still had the zoom problem.

jweb
09-17-2011, 02:04 AM
Somebody please?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum