Hi all, I'm new to web designing. I'm having a bit of trouble with the positioning of my divs.

 

My site has the content division aligned to the middle of the page. Either side I have a division, one for the navigation bar and one for a picture.

 

Both divisions have a top margin of 25 pixels. If I insert a picture in the right bar it displays slightly lower than the left bar when previewed in a browser. In dreamweaver 8 it looks perfect.

 

If I apply the picture as the right division background it is positioned fine in the browser.

 

How do I insert the image and have it position correctly?

 

Here's the code I'm using:

#content {

margin-left: 200px;

text-align: justify;

margin-right: 200px;

margin-top: 10px;

}

#leftbar {

width: 165px;

margin-right: 5px;

display: inline;

float: left;

margin-top: 25px;

margin-left: 5px;

}

#rightbar {

float: right;

width: 165px;

margin-left: 5px;

margin-top: 25px;

margin-right: 5px;

height: 305px; ------ (This is the picture size).

display: inline;

}

#nav { -----------------(I have a nav div within the left bar but I don't think that is the problem).

width: 165px;

float: left;

}

#nav ul {

margin: 0px;

padding: 0px;

}

 

#nav li {

font-size: 85%;

list-style: none;

}

 

 

#nav a:link, #nav a:visited {

display: block;

width: 100%;

margin-bottom: 5px;

text-align: center;

padding-top: 5px;

padding-bottom: 5px;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-weight: bolder;

color: #FFFFFF;

text-decoration: none;

background-image: url(Images/button_wood_rollover.jpg);

}

 

#nav a:hover, #nav a:active {

color: #CCCCCC;

background-image: url(Images/button_wood.jpg);

}

Where's the page located?

 

Also why not install Firebug for Firefox and debug your CSS with that.

The page isn't online yet. I'm previewing in a browser from dreamweaver. (F12).

I've uploaded the site to the internet. When viewing the site on another computer the left and right bars are positioned perfectly. On my computer the right bar is slightly lower?? Any ideas why this would be?

Have u tried previewing on your comp using browser instead of dw?

Have u tried previewing on your comp using browser instead of dw?

 

 

Yeah, as useful as that "Preview" tool is - that's exactly what is it - a Preview.

 

You should always be verifying your pages in a REAL browser.

 

How about Firefox?

link?

How about Firefox?

 

Firefox is a link.

sorry i missed the bit about the page not being online yet.

 

how does the html appear? it makes a difference the order you put your elements in.