Help me with this CSS box model problem!
April 15, 2004 7:49 PM 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.
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.
Response by poster: 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
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
<!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
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
posted by Pericles at 9:28 AM on April 16, 2004
« Older Looking for Lamprey software from early 90s | Looking for good danceable Latin music for... Newer »
This thread is closed to new comments.
[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