Hi-
I'm helping someone customize their posterous site's theme and am having a problem.
I want to have a thin border around the page contents (that is, everything but the header). I did this by wrapping the post-header contents in a div that has a 1px border and suitable margins/padding. This looks fine on the main page, but if I click on article title to see a single-article page, then the article body, sidebar, etc. are outside and below the border. What should be a frame around the whole page content is instead a squashed rectangle between the header and the page content.
Here's the main blog page, with proper border:
http://blog.tanyacollinsdesign.com/
Here's a single-article page, with content outside & below the border:
http://blog.tanyacol...nd-original-art
I can't figure this out, because in both cases the article/sidebar/footer/etc. content is inside my border-box div.
Does anyone have any suggestions as to what may be wrong?
Thanks,
Chris.
Page 1 of 1
Problem with border around page contents
#2
Posted 11 April 2011 - 07:31 PM
You need to clear the floats. Add:
right here: http://clip2net.cory...607342_12Kb.png
<div style="clear:both;"></div>
right here: http://clip2net.cory...607342_12Kb.png
#3
Posted 12 April 2011 - 09:20 AM
That's great; thank you very much.
I can't say I understand what that did, but I'll figure it out!
I can't say I understand what that did, but I'll figure it out!
#4
Posted 12 April 2011 - 09:25 AM
When you float elements (like columns), they are taken out of the document flow. When you float an element, things float around them. So in order to place something below a floated element, you have to "clear" the floated elements. http://webdesign.abo.../a/aa010107.htm
Share this topic:
Page 1 of 1

Help











