CSS div width?

0 ⤊

Recently I created a horizontal nav bar in CSS, and I place it under an image header which is 780px wide. The nav bar width align up nicely with the image on pc browsers, but the nav bar was a bit short when I open up a browser on Mac. What is the key to make sure the image and the div box have the same width (length). I hope I explain it clearly!
Thanks for the help in advance!

D.H.

2006-08-09 07:10:12 · 3 answers · asked by DAVE the BEAR 1 in Computers & Internet ➔ Programming & Design

3 answers

try something like this. this will prevent the div from going all the way across then the next div clears out the float style.

my nav code here

you can use the same idea for a left nav

my left nav code here

my main body code here

2006-08-09 07:45:17 · answer #1 · answered by jmfc 4 · 0⤊ 0⤋

first try to put the image inside the DIV like ...

put the other nav stuff here

... and don't specify a width for the DIV in CSS, it should just take the width of that 780px image.

if you can't do that for your layout for some reason, be aware that different browsers render width differently when you also have either margin or padding specified in CSS (or both); have a look at http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html#notes or just search for "box model hack CSS"

good luck!

2006-08-09 07:50:19 · answer #2 · answered by eric melkerson 2 · 0⤊ 0⤋

An option I'd suggest is instead of using static pixels for a size, use a percentage. This way, the size is proportion to the monitor it's being viewed on.

2006-08-09 07:15:20 · answer #3 · answered by Ipshwitz 5 · 0⤊ 0⤋