Tags:




Help me with this CSS box model problem!
April 15, 2004 7:49 PM   RSS feed for this thread Subscribe

CSS issue. I have a problem with a site that I built. I can either make the centre box containing the main body of the pages line up with the other boxes on the page, or I can make the centre box flexible to allow for different resolutions etc, but not both. [more inside]

A copy of the CSS is here. I got the original layout from a site offering free templates that I found via MeFi but can no longer locate and which I have since changed a great deal. Somewhere along the line, I have stuffed something up and cannot get the layout to work properly. Originally, the layout used margins on the centre box to space it from the other boxes and it worked at any resolution, but the boxes only aligned with each other properly on IE6. After trying literally dozens of other solutions I found via Google, I ended up setting the width of the centre box at 60% to make it more or less work, but it is not really right and is awful at lower resolutions. Also, I have used pop-up windows to provide information in separate windows for a few places and, as these windows are narrower, the 60% setting does not work at all. The "solution" I came up with also generates a horizontal scroll bar in Mozilla-based browsers, but not in IE. Any suggestions warmly welcomed, either in how to fix it or what is actually causing the problem so I can find a solution myself.

Disclaimer: While I will not profit in any way directly from solving this problem, it is a work project, so feel free to ignore me if you have a problem with this.
posted by dg to computers & internet (6 comments total)
Was it like this? If you had padding/margins on the outer div for the centre column that might explain your problems in non-IE browsers.

[div style='position:absolute;top:0px;left:0px;width:250px;']
left column
[/div]

[div style='position:absolute;top:0px;left:0px;width:100%']
[div style='margin-left:250px;margin-right:250px;']
centre column
[/div]
[/div]

[div style='position:absolute;top:0px;right:0px;width:250px;']
right column
[/div]
posted by holloway at 8:48 PM on April 15, 2004


Actually, I think that this may be where I got the original template from, except that the site I got it from was providing templates for free use and had a wizard-style interface where you chose the options and it generated the CSS.
posted by dg at 9:17 PM on April 15, 2004


One help in troubleshooting will be to declare your doctype by using the following html at the top of each page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Mozilla and IE6 have "standards" and "quirk" modes. This code will give you "standards" mode across most browsers, causing them to interpret your code in the same way.
posted by 4easypayments at 9:22 PM on April 15, 2004


Definitely add the DOCTYPE to get some consistency. Scaling (or "liquid") boxes in CSS is not an easy thing. The (incredibly problematic) trick is this: don't provide a width for the box you're trying to scale. That will allow you to apply padding to it in the way you want. Given the layout you have (without taking a close look at the CSS), you could try this:

1. Fix the width of the left and right boxes at x and y
2. Give the middle box margin-left of (x + reasonable offset) and a margin-right of (y + reasonable offset) so you've reserved space for the side boxes.
3. Apply padding to the centre box as necessary
4. ???
5. Profit
posted by yerfatma at 7:26 AM on April 16, 2004


first time for ages I've heard the word "profit" used in conjunction with web development ...
posted by Pericles at 9:28 AM on April 16, 2004


You don't know what step 4 is though.
posted by yerfatma at 9:56 AM on April 16, 2004


« Older Anyone know how to get copies ...   |   My 1-year-old son loves when w... Newer »
This thread is closed to new comments.