CSS Div Width

http://qa.techinterviews.com/q/20060809111012AAgSTDs

 

CSS Div Width?

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.

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

<img src="header.jpg" />
<div style="width: 780px; height: 50px; float: left;">
my nav code here
</div>
<div style="clear: both; height: 0px;"><!-- --></div>

you can use the same idea for a left nav
<div style="width: 200px; float: left;">
my left nav code here
</div>
<div style="width: 600px; float: left;">
my main body code here
</div>
<div style="clear: both; height: 0px;"><!-- --></div>

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.

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

<img src="header.jpg" />
<div style="width: 780px; height: 50px; float: left;">
my nav code here
</div>
<div style="clear: both; height: 0px;"><!-- --></div>

you can use the same idea for a left nav
<div style="width: 200px; float: left;">
my left nav code here
</div>
<div style="width: 600px; float: left;">
my main body code here
</div>
<div style="clear: both; height: 0px;"><!-- --></div>

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

<div>
<img src="imageheader.gif" width="780" /><br />

put the other nav stuff here
</div>

... 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!