PDA

View Full Version : Probably a Simple CSS Problem



imiles
Jun 26th, 2010, 03:46 AM
Hey there!

Let's bite the bullet. Take a look at this:

http://www2.picturepush.com/photo/a/3690965/img/Anonymous/right.jpg

Isn't that odd? The "News" section shifted to the right and the nav bar disappeared.

CSS Code:



#nav {

width: 900px;
height: 25px;
background-color: #FEEDC5;
vertical-align: top;

}

#body {

float: left;
width: 700px;
height: 400px;
background-color: #FEDA8B;

}

#footer {

width: 900px;
height: 20px;
background-color: #9C6F0E;
vertical-align: bottom;

}

/* Other */

#news {

float: right;
width: 200px;
height: 400px;
background-color: #FEEDC5;
position: relative;

}



And the HTML snippet:


<html>
<head>
<title>HabboShake - Home</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">

<div id="header">

</div>

<div id="nav">

</div>

<div id="body">

</div>

<div id="news">
Hello people, this is a news article for the site.
</div>

<div id="footer">

</div>

</div>

</body>
</html>

Any ideas? Thanks!

Excavator
Jun 26th, 2010, 04:16 AM
Hello imiles,
Without spaces in your text there is no where to break. Try replacing Heyyyyyyyyyyyyyyyyyyyyy.ffffffffffffffff with an actual sentence that has spaces between the words.

imiles
Jun 26th, 2010, 04:28 AM
Thanks mate, using full sentences did fix part of the problem. But now, the nav bar disappeared and the news section shifted to the right.

See updated image.

optimus203
Jun 26th, 2010, 04:41 AM
Something like this?



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav {
width: 900px;
height: 25px;
background-color: #FEEDC5;
vertical-align: top;
}
#body {
float: left;
width: 700px;
height: 400px;
background-color: #FEDA8B;
}
#footer {
float:left;
width: 900px;
height: 20px;
background-color: #9C6F0E;
vertical-align: bottom;
}
#news {
float: left;
width: 200px;
height: 400px;
background-color: #FEEDC5;
position: relative;
}
</style>
</head>
<body>

<div id="container">

<div id="header">

</div>

<div id="nav">
Links</div>

<div id="body">
Body text
</div>

<div id="news">
Hello people, this is a news article for the site.
</div>

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

</div>

</body>
</html>

imiles
Jun 26th, 2010, 04:50 AM
Thanks, worked like a charm.