1 reply [Last post]
Last seen: 18 years 4 weeks ago
Joined: 2004-06-06
Posts: 1
Points: 0

Hi all,
I'm new to this CSS stuff so bear with me if something I say makes no sense!

I am trying to make a layout which has:
- A banner measuring 150px height, and 100% width
- A navigation bar on the left, exactly 150px wide, including 8px padding on left and right, which covers the entire height of the page (including scrolling).
- A small area underneath the banner for the pagetitle
- The content, which is 100% of the width of the window, with 8 pixel padding from the page title at the top, and 8px padding on the left from the nav bar. Also 8 pixel padding on right from edge of page, and 8 pixel padding on bottom from edge of page.

In Internet Explorer, I managed to do this before without any problems.

In Firefox however, I am experiencing some strange problems with padding.

I create my navbar's css style (only included the positioning parts, there is a border defined, and some colours and fonts...):

#navbar {
	position: absolute;
	height: 100%;
	width: 150px;
	left: 0px;
	top: 0px;
	margin: 0px;
        padding-top: 158px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 8px;

Then, on my page, I create a new DIV with id "navbar", and then fire up the browser:
<div id="navbar" style="position:absolute; z-index:2;"> 
<P><B>Some heading</B><BR>

As I said, Internet Explorer renders it beautifully. However, Firefox seems to increase the size of the navigation bar to what I'm guessing is 166px, so it overlaps the content text. Also, the page has a spurious horizontal scrollbar that let's you scroll across onto blank space!

I have attached an image ofwhat the page should look like (drawn in Fireworks), and images of the result in Firefox and Internet Explorer.

If you want, have a look at the page yourself at:

If anyone can help me resolve this problem I will be most grateful!


rtm223's picture
Last seen: 18 years 7 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Expanding div with padding?

I think this is the infamous IE broken box model/quirks mode thing.

As I remember the xml thing at the very beginning of the page, throws IE into quirks mode, and IE is getting it wrong. Standards-based CSS:

total width = specified width + padding + borders

In quirks mode IE6 displays incorrectly. I think if you remove the xml thing it will act the same in both browsers (although I have no idea what the xml is there for does :? lol)

Then you will have to re-specify the widths to take into account the extra padding and borders.

Then if you want to get the thing to work in IE5 you will need a <a href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">box model hack</a>

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P