CSSFilter: Webkit won't keep my elements in their fixed width container.

February 10, 2009 3:44 PM

CSSFilter: I am building a wordpress site that uses a basic two column layout with floating div elements inside a fixed-width div . Any clues why Safari and Chrome appear to be ignoring the fixed-width container div allowing the interior elements to float away to the edges of the browser? Explorer and Firefox aren't doing this.

I'll admit that the template is now a total hack, but I'm hoping there's some well-known quirk or mistake that would cause webkit to ignore the container. If it's any help, the floating elements are right up at edge of the browser window without any padding...

posted by geos to Computers & Internet (16 answers total)

Show us your code.
posted by AmbroseChapel at 3:48 PM on February 10, 2009

Response by poster: (this is embarassing)

the structure is (ignoring some interior divs):

body
header
page
content sidebar

....




* {
margin: 0;
padding: 0;
font-family: Arial,'Lucida Sans Unicode',sans-serif;
}

/* STRUCTURE - margins and padding */

body {
text-align: center;
font-size: 62.5%;
}

#header {
width: 1024px;
height: 150px;
margin-left: 0;
margin-right: auto;
clear: both;
vertical-align: top;
text-align: left;
}

#page {
width: 1024px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
text-align: left;
clear: both;

padding-top: 0px;
margin-top: 0px;

font-family: Arial,'Lucida Sans Unicode',sans-serif;

}

#sidebar {
text-align: left;
width: 485px;
padding-left:10px;
padding-top: 10px;
float: right;
clear: right;

}

#content {
float: left;
text-align: left;
width: 480px;
padding-right: 5px;
padding-top: 50px;

}
posted by geos at 3:58 PM on February 10, 2009

Response by poster: umm.. sorry. that wasn't clear: page is the container div, it isn't inside header.
posted by geos at 4:00 PM on February 10, 2009

Quick guess: try removing "clear: both" from both #page and #header, and "clear: right" from #sidebar. Any difference?
posted by oulipian at 4:09 PM on February 10, 2009

Also, shouldn't #header have "margin-left: auto", not "margin-left: 0"?
posted by oulipian at 4:14 PM on February 10, 2009

A few things...

Firstly, your #page should not have a width of 1024, unless you want a horizontal scrollbar on longer pages. The browser needs some breathing room. I suggest using 1000px on it, instead. Text is automatically aligned to the left, as well, so you don't need to specify it.

You can use shortcuts in your CSS, so you don't have to type so many sides of things. For instance, margins for all four sides can be written as so:

margin: TOPpx RIGHTpx BOTTOMpx LEFTpx

Or, if you only have two you need to specify:

margin: TOP&BOTTOMpx RIGHT&LEFTpx.

Okay, now for your code:

#page {
font-family: Arial, 'Lucida Sans Unicode', Verdana, sans-serif;
margin: 0 auto;
width: 1000px;
}

#sidebar {
float: right;
padding: 10px 0 0 10px;
width: 485px;
}

#content {
float: left;
width: 480px;
padding-right: 5px;
padding-top: 50px;
}

Finally, keep in mind that padding makes an element's width essentially bigger. If you have a block that is 50px wide, with left padding of 10px, the block is going to be 60px wide. If your columns break, try adjusting the widths and padding.

Good luck!
posted by metalheart at 5:04 PM on February 10, 2009

Response by poster: yeah, my css is ugly and redundant... (and the fixed width is too wide)

removing the clear's didn't change anything one way or another... safari still renders it as if 'page' wasn't there at all...

ohwell.
posted by geos at 7:54 PM on February 10, 2009

Adding "overflow: hidden;" to #page is a little trick that will cause #page to wrap around #sidebar and #content even though they're floating (you can also do this by adding a div with "clear: both" inside #page but after the floating divs). I don't know if it will solve your Webkit issue, though.

In any case, it's almost certainly the floats messing things up. You could try using absolute positioning instead.
posted by oulipian at 8:11 PM on February 10, 2009

oulipian has it. You need another div after the floats that is defined with clear:both. Right now, if the only content of #page is 2 floating divs, there's nothing static to hold it down. It appears totally empty to some browsers, like it's not even there.

So add #footer after #sidebar (I think it would work if you added it after you close #page too).

#footer {
clear:both
}
posted by junkbox at 9:06 PM on February 10, 2009

As others have said, the code itself could use some cleaning up, but I think there's something else in your layout that's causing the problem besides what you've described here. I took your CSS as-is, coded some basic divs, and everything behaved as expected in FF, IE, Chrome, and Safari (on Windows). Here is the page (I added 1px colored borders around the divs).

Are there other elements on the page, or CSS governing contained elements, that might be relevant?
posted by camcgee at 9:30 PM on February 10, 2009

Response by poster: i forgot to say there is a fixed width footer....

added the overflow:hidden to #page... no change

i guess it's nothing obvious looks like i'm going to have to try coloring all the little boxes and see what's happening.

thanksall.
posted by geos at 4:19 AM on February 11, 2009

Best answer: coloring all the little boxes...

I usually have a CSS rule like this:

div {border: 0px #ccc solid;}

That way I can quickly turn on borders on all my layout elements just by changing the 0 to a 1. Helpful for diagnosing problems like this, cross-browser. Firefox's Web Developer toolbar has a ton of useful little tools that let you do things like this without writing code, but of course it's not that useful if your problem is only happening in Safari.
posted by oulipian at 5:49 AM on February 11, 2009

Response by poster:
I usually have a CSS rule like this:

div {border: 0px #ccc solid;}


thanks.

looking at the boxes, safari is rendering the 'page' element but somehow making it variable width i.e. it resizes with the browser window. i'm baffled.
posted by geos at 6:03 AM on February 11, 2009

Hmm. Is that also happening with the #header? You might try temporarily removing / commenting out everything that's inside of #page, to see if it's something inside the div that's causing the problem. Also, try adding "position: relative;" to #page to see if that changes anything.
posted by oulipian at 6:35 AM on February 11, 2009

Response by poster: both header and footer are fixed width and stay that way in safari...

removed everything from 'page' and safari still treats it as variable width...

totally baffled.
posted by geos at 8:34 AM on February 11, 2009

Response by poster: ummm... appears to have been a bug in one of the wp plugins... behavior went away magically when i updated the plugin but i had to remove everything from the site to see that the plugin css was the only stuff left.

ack.

thanks oulipan for sticking around.
posted by geos at 9:04 AM on February 11, 2009