volos

Hi folks, I'm new here and yes, you guessed it, I have a small problem.
For my website layout I will use a simple design - one div for the header and one for the content.
Now the site is displayed correctly in Opera and IE but Firefox displays the content div a few pixels wider, which really makes it look horrible.
I specified them to the same width.
Oh, here's the address: http://freeweb.siol.net/miranlpv/test
Thanks in advance for your help!

Oh by the way, does anyone know how to position a piece of text in a div to the bottom of the div? vertical-align for the text didn't work so I had to move it by using position:relative. I know, a crude solution but it did the trick.
????: NamePros.com http://www.namepros.com/web-design-discussion/67840-problem-with-firefox-display-div-width.html

By the way, here's how it looked to me with firefox http://freeweb.siol.net/miranlpv/screen.gif

EricH

Well, you could put them both in a DIV tag which is centered and using a width of 468. Then give your div tags a 100% width (which would be 100% of 468). The only other reason I say you may want to try this is that supposedly the <center> tag will become obsolete in the future... supposedly.

Nevermind, something in your coding is messed up. I don't have time to find it right now, but doing it the way I suggested should have given two 100% block and it didn't (in FireFox)... http://www.w3bids.com/test.html

Dwaggy

its the padding you have in your div.content.

add the padding to your h1 and p elements instead.

????: NamePros.com http://www.namepros.com/showthread.php?t=67840
protip : Your markup contains useless stuff really, you could get the page to look exactly the same with the following markup :

<h1>Name of page</h1>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
</ul>
<h2>Newspost header</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>ipsum sit amet dolor lorem</p>

volos

Thanks for the replies guys!
Anyway, it looks like I still haven't solved the problem.
Removing the padding inside the div.content makes the width correct for all browsers but it shifts the div.content a few pixels downwards. I think it shouldn't do that, really. Cause when you think about it, padding should influence how much child elements are seperated from the parent element and not expand the parent element. So is that a display bug in firefox? Or a 'feature'?
????: NamePros.com http://www.namepros.com/showthread.php?t=67840
Inserting the padding inside the h1 and p sections does indeed make the width like it should, but I don't like the idea of having to add padding inside almost every element inside the div. And the vertical offset still remains (just remove the padding from the div and you'll see).
I have no idea why firefox does that with the padding and why the whole thing moves downward if the padding is removed.