Cross-browser compatible CSS liquid layout with 3 columns of 100% width/height -
I started creating my HTML / CSS layout based on the article and was more successful / less successful. However, I think I've messed with my CSS somewhere because this page does not appear in IE or Chrome / Firefox the same way ...
Actually, in my opinion, 3 equal width Column, the contents of each column with 100% height should have some padding on the left, top and right sides, and the 'Main' link should be located at the bottom of each column, aligned in the middle of its column.
This sketch is my layout
You can see my current result If you see this page in Chrome / Firefox then you can see that the content outside my page is divs 'bleed' However, in IE content divs fit well (i
You are setting the height of 100% but are also setting up padding / margin etc.
EDIT: Set either padding / margin / borders as percentages so they can increase the height Calculate 100% or pixels, using javascript, you can tell the height of the window in pixels, so that you can set the correct height for each column. To act as a 100% rule in the CSS, you can always set it to the size of the window.
Comments
Post a Comment