Home/ Questions/Q 8227383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:06:50+00:00

I started to create my HTML/CSS layout based on this article and was more/less

  • 0

I started to create my HTML/CSS layout based on this article and was more/less successful. However, I think that I messed up somewhere with my css, since this page is not displayed in the same way in IE or Chrome/Firefox…

Basically, my idea is to have 3 equal-width columns, with 100% height. Content of each column should have some padding on left, top and right sides, and ‘main’ links should be positioned in the bottom of each column, aligned in center of its column.

This is the sketch of my layout

enter image description here

You can see my current result here. If you look this page in Chrome/Firefox you can see that content divs are ‘bleeding’ out of my page, however, in IE content divs fit nicely (I put border on content divs for testing purposes only). I don’t believe that IE is rendering my CSS correctly, rather I believe that I’m doing something wrong with my CSS, but really not sure what. Thanks for any help on this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are setting height of 100% but also setting padding/margins etc, the height is the inner height and padding/margins/borders will be added to this, thus causing an overflow.

    EDIT: Either set padding/margins/borders as percentages so that they + height add up to 100% or calculate pixels appropriatley using javascript to tell you the window height in pixels allowing you to determine the correct height for each column. You can always fire this on resize of the window to act like a 100% rule in css.

    • 0