Setting Header/Content width
For a while, I was adjusting my header and content width based on percentage so it would automatically adjust to anyone's browser. When I decided to add a header image, I had to switch to a fixed width for my header and body block.
That's where I ran into problems.
I changed the width in the following from a percentage (75%) to a straight pixel measurement (900px). Unfortunately, the div.bodyheaderblock measurements seem to be connected to the comment/entry headers. It's fine when I'm just viewing the journal, but when I look at an individual entry, something goes screwy with the code and the comments (and entry) end up wider than the body block, a problem I didn't have when I was just using a percentage.
div.bodyblock {
background-color: $*color_body_background;
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.pageheaderblock {
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.bodyheaderblock{
width: 900px;
margin-left: auto;
margin-right: auto;
}
Is there a div block I could/should be using to make this work? Examples can be seen on any of my entries that feature comments from the outside world.
(x-posted to s2smoothsailing and s2styles)
EDIT: I solved the problem by changing "width" to "max-width". It only works in Fx, but if someone's using IE, I don't particularly care. There's a fix for IE out there somewhere, but I'm not too worried about it. I'll figure something out.
EDIT: After looking through the source code for both the layout and individual pages, I've found that the header above comments is indeed considered a "bodyheaderblock" just like the title. Is there a way to adjust their widths seperately?
That's where I ran into problems.
I changed the width in the following from a percentage (75%) to a straight pixel measurement (900px). Unfortunately, the div.bodyheaderblock measurements seem to be connected to the comment/entry headers. It's fine when I'm just viewing the journal, but when I look at an individual entry, something goes screwy with the code and the comments (and entry) end up wider than the body block, a problem I didn't have when I was just using a percentage.
div.bodyblock {
background-color: $*color_body_background;
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.pageheaderblock {
width: 900px;
margin-left: auto;
margin-right: auto;
}
div.bodyheaderblock{
width: 900px;
margin-left: auto;
margin-right: auto;
}
Is there a div block I could/should be using to make this work? Examples can be seen on any of my entries that feature comments from the outside world.
(x-posted to s2smoothsailing and s2styles)
EDIT: I solved the problem by changing "width" to "max-width". It only works in Fx, but if someone's using IE, I don't particularly care. There's a fix for IE out there somewhere, but I'm not too worried about it. I'll figure something out.
EDIT: After looking through the source code for both the layout and individual pages, I've found that the header above comments is indeed considered a "bodyheaderblock" just like the title. Is there a way to adjust their widths seperately?