Getting Divs to Display Properly - HTML Forums

Lanternkami · 11-01-2009, 01:39 AM

Hello, I am redoing one of my portfolio pieces and I ran into some issues getting divs to display properly in Firefox and Chrome, they work as intended in IE, which I thought was odd seeing that IE is ussualy the trouble maker.

To give you some backround I originaly created this site a few months back and it was pure HTML and CSS. I am now going back and adding some PHP to make it more dynamic, the PHP code is the same code that I wrote for a friends website which he no longer uses. I wrote all the PHP and he used a WYSIWYG to do the layout so as you can imagine the HTML and CSS is a hackjob. Long story short I have to redo the layouts to work with my code

. I was moving along decently until i hit this speed bump.

The link to the site is: http://mpageaujr.com/samples/iddqd/r...imiter=&page=1

The problem Im having is that the DIV's are overlapping and not displaying correctly (the image of and text blurb are supposed to line up and the login is supposed to be below it). the way its suppost to look is like this: http://www.mpageaujr.com/inprogress/screenshot.jpg
the screenshot is taken off IE 7

the source code for the page:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>IDDQD.net - Game reviews for the gamer in all of us!</title>
</head>
<body>
<div id="maindiv">
<div class="content" id="banner"><img src="images/banner.gif" alt="Iddqd.net Banner" width="800" height="199" /></div>
</div>
<div id="linksdiv">
<div id="homelink" class="toplinks"><a href="index.php"><img src="images/placeholder.gif" alt="home link" /></a></div>
<div id="newslink" class="toplinks"><a href="news.php"><img src="images/placeholder.gif" alt="news link"  /></a></div>
<div id="xboxlink" class="toplinks"><a href="reviewlist.php?platform=xbox&sort=dts&limiter=&page=1"><img src="images/placeholder.gif" alt="xbox reviews link"  /></a></div>
<div id="ps3link" class="toplinks"><a href="reviewlist.php?platform=ps3&sort=dts&limiter=&page=1"><img src="images/placeholder.gif" alt="ps3 reviews link" /></a></div>

<div id="wiilink" class="toplinks"><a href="reviewlist.php?platform=wii&sort=dts&limiter=&page=1"><img src="images/placeholder.gif" alt="wii reviews link" /></a></div>
<div id="pclink" class="toplinks"><a href="reviewlist.php?platform=pc&sort=dts&limiter=&page=1"><img src="images/placeholder.gif" alt="pc reviews link" /></a></div>
<div id="classiclink" class="toplinks"><a href="reviewlist.php?platform=classic&sort=dts&limiter=&page=1"><img src="images/placeholder.gif" alt="classic reviews link" /></a></div>
<div id="aboutlink" class="toplinks"><a href="about.php"><img src="images/placeholder.gif" alt="about us link" /></a></div>
</div><br/><br /><div id="maincontent"><div id="reviewlisted"><div id="listscreen"><a href="showreview.php?id=28"><img src="images/review_images/IMG4a552f5d7b8a4.jpg" width="150" height="110" border="1"></a></div><div id='listsummary'>The year is  2277, 36 years after the setting of Fallout 2 and 200 years after the nuclear war with China that devastated world in an alternate post-World War II timeline. The game places the player in the role of an inhabitant of Vault 101, a survival shelter designed to protect a small number of humans from the nuclear fallout. When the player's father disappears under mysterious circumstances, the player is forced to escape from the Vault and journey into the ruins of Washington D.C. to track him down...</div></div><br /><div id="reviewfooter>"<p style='color:white'>Now showing page 1 of 1 </p><a href='http://satorigames.com/reviewlist.php?platform=xbox&sort=dts&limiter=&page=1' style='color:white;'>1</a>&nbsp;<form name="login" method="post" action="login_process.php">
<fieldset style="width:250px; color:black; font:Arial, Helvetica, sans-serif; border-bottom-color:white;">
<legend>Login</legend>
Welocome to Satori Games, Please Login or <a href="signup.php">register</a>.<br />

Name: &nbsp;

<input type="text" name="username" />
<br />
Password: &nbsp;
<input type="password" name="password" />
<br />
<input type="submit" value ="Login" />
</fieldset>
</form></div>
</body>

</html>

the CSS:

Code:

@charset "utf-8";
/* CSS Document */
a {
color: white;
}
body {
background-color: #000000;
}
#maincontent{
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
border:#54d6ee medium;
color:#54d6ee;
}
img {
border-style: none;
}
#linksdiv{
text-align:center;
width: 800px;
height: auto;
background-color:black;
margin-left:auto;
margin-right:auto;
}
#maindiv {
width:auto;
height:auto;
}
.toplinks{
float:left;
text-align:center;
display: block;
width: 100px;
height:30px;
border:thin;
border:#54d6ee;
}
.content {
width: 800px;
height: auto;
margin-right:auto;
margin-left:auto;
}
#homelink {
background-color:#4c4c4c;
background: url("images/home.gif") no-repeat 0 0;
}
#newslink {
background-color:#4c4c4c;
background: url("images/news.gif") no-repeat 0 0;
}
#xboxlink {
background-color:#4c4c4c;
background: url("images/xbox.gif") no-repeat 0 0;
}
#aboutlink {
background-color:#4c4c4c;
background: url("images/about.gif") no-repeat 0 0;
}
#ps3link {
background-color:#4c4c4c;
background: url("images/ps3.gif") no-repeat 0 0;
}
#wiilink {
background-color:#4c4c4c;
background: url("images/wii.gif") no-repeat 0 0;
}
#classiclink {
background-color:#4c4c4c;
background: url("images/classic.gif") no-repeat 0 0;
}
#pclink {
background-color:#4c4c4c;
background: url("images/pc.gif") no-repeat 0 0;
}

#homelink:hover{
background-color:#FFFFFF;
background: url("images/home_o.gif") no-repeat 0 0;
}
#newslink:hover{
background-color:#FFFFFF;
background: url("images/news_o.gif") no-repeat 0 0;
}
#xboxlink:hover{
background-color:#FFFFFF;
background: url("images/xbox_o.gif") no-repeat 0 0;
}
#aboutlink:hover{
background-color:#FFFFFF;
background: url("images/about_o.gif") no-repeat 0 0;
}
#ps3link:hover{
background-color:#FFFFFF;
background: url("images/ps3_o.gif") no-repeat 0 0;
}
#wiilink:hover{
background-color:#FFFFFF;
background: url("images/wii_o.gif") no-repeat 0 0;
}
#pclink:hover{
background-color:#FFFFFF;
background: url("images/pc_o.gif") no-repeat 0 0;
}
#classiclink:hover{
background-color:#FFFFFF;
background: url("images/classic_o.gif") no-repeat 0 0;
}
#reviewlisted{
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#listscreen{
float:left;
text-align:center;
display: block;
}
#listsummary{
float:left;
text-align:left;
display: block;
padding-left: 5px;
}
#reviewfooter{
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
}

With my luck its probably some stupid error on my part but I have been looking at it for a while and now and cant see anything wrong. Plus the fact that it displays correctly in IE is really weird lol

Thanks for your time!

Pegasus · 11-01-2009, 01:44 AM

Try adding clear:both; to the reviewfooter CSS.

Lanternkami · 11-01-2009, 01:47 AM

hmmm that didnt seem to help, thank you tho!

*well when playing around with clear I found out why the divs were stacking, i somehow put <div id="name>" rather then id="name"> lol, now i just need to get them to line up.

Thanks for the tip

Pegasus · 11-01-2009, 01:44 AM

So you did. I hadn't noticed that. If you need more help, just give a shout. And you're quite welcome.