CSS Forum

**Rajaie** · 01-10-2008, 09:49 AM

Hey guys, i would like to know how to make the css not let the menu on the left continue into the main content. i would like text to go down after it has reached a maximum point in the left column. also i want the footer to stick to the bottom of the page, how can i do this?

here is my css code:

Code:

body {
background-image: url('../images/bg.png');
background-repeat: repeat-x;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 80%;
height:1000px;
background-color:#FFFFFF;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
background-color: orange;
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
background-color: blue;
width: 17%;
float: left;
margin-top: 1px;
margin-bottom: 0px;
}
div#main {
background-color: green;
margin-left: 153px;
margin-top: 1px;
margin-bottom: 0px;
}
div#footer {
background-color: yellow;
padding: 15px;
margin-top: 1px;
border-top: thin solid #000000;
}

**LadynRed** · 01-10-2008, 02:54 PM

For the footer problem, try this: http://www.themaninblue.com/writing/...ve/2005/08/29/

AS for the nav running into the text, I think you need to modify your widths.

**Rajaie** · 01-11-2008, 04:52 AM

Thanx. but another problem is that when ever I insert a space in the navigation menu, the text goes down. as if i did a <br> , whats the problem ?

**chrishirst** · 01-11-2008, 04:57 AM

It's not a problem, it's called word wrapping.

Perfectly normal HTML behaviour. It the text is too wide for the container it will "break" to the next line where there is a space in the text.

**Rajaie** · 01-11-2008, 08:18 AM

but you see, if i write dddddddddddddddddddddddddddddd, then it doesnt go down one line, but if i write a f then it goes down one line, this is a problem i think

**chrishirst** · 01-11-2008, 08:34 AM

Dunno,

Should we carry on guessing? or are you going to tell us where we can see this "problem"

**Rajaie** · 01-11-2008, 09:02 AM

well i posted the code and and image at the top, what more do you need?

**joder** · 01-11-2008, 09:04 AM

You posted the CSS, we need the HTML.

**chrishirst** · 01-11-2008, 09:10 AM

What he said

**Rajaie** · 09:57 AM

Ohh, =o The thing with the space is ok now but the problem with the text going in the body is still there:

CSS Code (New One)

Code:

html,body {
height: 800px;
background-color: silver;
margin: 0;
}

div#wrapper {
background-color: white;
min-height: 700px;
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 3px green solid;
}

div#header {
text-align: center;
background-color: yellow;
min-height: 100px;
border-bottom: 3px green solid;
}

div#main {
background-color: orange;
width: 80%;
float: right;
min-height: 700px;
border-left: 3px green solid;
}

div#menu {
background-color: purple;
width: 20%;
min-height: 700px;
}

And the html:

Code:

<!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 Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id=wrapper>
<div id=header>Header</div>
<div id=main>Main Content</div>
<div id=menu>Menu fdfd dfsffffffffffffffffffffffffffffffffffffffff sdsssssssssssssssssssssssssss ddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
</div>
</body>
</html>

Try the top and you'll see what I mean.

**LadynRed** · 01-11-2008, 12:45 PM

Quote:

if i write dddddddddddddddddddddddddddddd, then it doesnt go down one line,

No, because that is an unbroken string of characters and IE especially will just stretch to accommodate that. You will never have a word that long or an unbroken phrase, so using that as a test isn't a good practice. Use some real text - with spaces between words.

**Rajaie** · 01-11-2008, 10:17 PM

it worked! thanx man :-)

but when i checked the above codes in ie 6 it was all messed up, are there some special codes for ie 6 or something :[ ??

**LadynRed** · 01-12-2008, 10:27 AM

Quote:

but when i checked the above codes in ie 6 it was all messed up, are there some special codes for ie 6 or something :[ ??

IE6 has a LOT of bugs.. a reference you need to study is here:
http://www.positioniseverything.net/explorer.html

Then google for Conditional Comments so you can use the fixes you'll need.

**Rajaie** · 01-12-2008, 11:58 AM

Ok, thanks man, i really appreciate it

**LadynRed** · 01-12-2008, 01:51 PM

Man ??? Have you looked at my Avatar photo ??

**Rajaie** · 01-13-2008, 10:04 AM

Sorry, it's just something I got used to on the web.
No hard feelings I hope.