WEB ok CSS question: why is my text running into another column?

Falconer · Oct 3, 2008

(note: I hope I'm not dumb. Some of these other questions that I see people asking are super smart questions... I feel like this is something anyone would understand but I'm dumb for some reason )

So on the advice of OT I decided to try and learn CSS so I could make a tableless layout.

So far so good. By copying a template from an instructional site and slowly changing stuff one thing at a time, I am finally starting to make some progress.

My page is divided into the following divs: wrapper (covers the whole thing; the website said to do this), header, nav, main, and footer (all self explanatory).

(code at the bottom)

Alright so when I start typing in the different sections, it pretty much looks how I figure it would:

The only thing I don't understand is why the nav options are pushing their way into the footer area, but that seems to go away when I add more main text.

1. Why are my "nav" area options appearing in the footer section? I would think that "footer" would be distinct and would automatically appear below whatever the lowest element in "nav" or "main" was. Why is this not the case?

Anyway, I type some more info in "main," and all is well. I think I'm kinda almost getting the hang of this, until I add more info into my main area. Look what happens:

Things I don't understand:

2: Why is the main area text pouring over into the other division area? (circled red part) Based on how it was acting before, I thought there was barrier where I drew the vertical yellow line that nothing would cross. That is how the text was behaving before it got lower than the text in the nav section. Why? I set the Nav div to be a width of 178 pixels (that's the width of the images I'm eventually going to use).

css:
Code:
<style type="text/css">

</style>


a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}


div#footer ul li{
color : #000000;
background-color : transparent;
display: inline;
}

div#footer ul li a{
color : #115EAC;
background-color : transparent;
text-decoration : none;
}

div#footer ul li a:hover{
text-decoration : underline;
}
html:
Code:
<!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 rel="stylesheet" href="C:\Documents and Settings\Desktop\stylesheetold.css" type="text/css" />
<title>How to Build a Basic CSS Layout</title>
<meta name="Description" content="How to Build a Basic CSS Layout" />
<meta name="Keywords" content="css layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>How To Build a Basic CSS Layout</h1>
<p>hi anything I type up here will be in the header division</p>
</div>
<div id="nav">
<h2>Navigation</h2>
<p>this is navigation<br>menu 1<br>menu2<br>menu3<br>menu4</p>
</div>
<div id="main"></div><h2>Main Area</h2>
  <p>This is the main area. All my main text will go here.<br/>CSS is pretty cool but I suck at it.<br/>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
  </p>
<div id="footer">footer yo</div>
</div>
</body>
</html>
Last question:

Why does it look awesome in IE but in FF, it looks like this:

Is FF like super strict and I left off a close tag somewhere or something?

Thanks

hurleyint1386 · Oct 3, 2008

There's one flaw with CSS... not everything is cross-browser, which means you could write something, and it could look amazing in FF, but look like shit in IE (which is often the case). I've done a lot of cross-browser CSS, and sometimes it requires different styles. For every website I make I have a styles.css and a styles_ie.css and when the page loads, I check if it's IE I use the IE styles, if it's pretty much anything else, use the original styles.
The reason why your main content is going over to the left is because the nav doesn't have a height declaration. So when the main content is being displayed, it displays right under where the nav bar ends. If you were to set height: 600px; for example, you will notice that the main text won't over flow over to the left (that is until it gets 600px down the page, then it will go over to the left). If you do height: 100%; then it won't work in all browsers, which will cause some browsers to look fine, and others to look exactly like what you're doing.
Also, as far as your nav overflowing into your footer, it's because again, there is no height declaration for main, and since footer comes after main, the footer is displayed right after main ends, and the nav is still over there on the left continuing down.

Falconer · Oct 3, 2008

^ Thanks.

Is there a website I can go to that lists how you have to code differently for IE vs. FF? I don't think my site is terribly complex but I'd like it to work in both.

Log in or Sign up

WEB ok CSS question: why is my text running into another column?

Falconer OT Supporter

hurleyint1386 Someone has sand in their vagina

Falconer OT Supporter

Share This Page