PDA

View Full Version : div columns not displaying properly



checkyo
Jul 12th, 2010, 08:07 AM
Not sure if this is due to my CSS or HTML code, but the div columns I set up aren't displaying properly once I upload. I used Dreamweaver and the columns appear properly (left_column, center_column, and right_column), but once I uploaded it, the site displays them vertically.

This is my CSS code:
[CODE]
@charset "utf-8";
/* CSS Document */
body {background-color: black;}

#container {
width: 975px;
background: black;
margin: 0 auto;
overflow: hidden;
}
#main_image {
background-image: url(../images/main.jpg);
background-repeat: no-repeat;
position: relative;
height: 376px;
width: 975px;
}

#left_column {
width: 325px;
float: left;
margin: 0 0;
}


#center_column{
width: 325px;
float: left;
margin: 0 0;
}

#right_column {
width: 325px;
float: left;
margin: 0 0;
}


[ICODE]

You can check out the site as it's uploaded now:
http://www.maxlanman.com

Let me know if I should post my HTML too.

SB65
Jul 12th, 2010, 09:27 AM
The link to your css file on your live page still shows as:

file:///Macintosh HD/Users/MaxLanman/Downloads/check_cs5/styles/check_cs5.css

Looks like you haven't amended the link to point to your live css file.

Incidentally, if you give a link to your page we can pick up the html/css direct from that - so no need to post them as well.

abduraooft
Jul 12th, 2010, 09:28 AM
I used Dreamweaver and the columns appear properly (left_column, center_column, and right_column), but once I uploaded it, the site displays them vertically. You shouldn't rely/use the design view of any wysisyg editors, since they are not a real browser. Instead, you need to preview your pages in a modern browser like FF,Safari etc and often check the compatibility in IE too.

Now, I'd recommend you to check http://bonrouge.com/3c-hf-fluid.php to se how to make a good 3 column layout.