...

View Full Version : Probably a Simple CSS Problem



imiles
06-26-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
06-26-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
06-26-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
06-26-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
06-26-2010, 04:50 AM
Thanks, worked like a charm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum