Help - Search - Members - Calendar
Full Version: Frame around blog
Movable Type Community Forum > Additional Resources > Tips and Tricks
trego
Hello -

I feel like I've exhausted all my resources and still can't find the fix. I'm trying to put a 1 pixel "frame" around my entire site, which is centered horizontally in the browser. I have a simple 2 column web log, and my "#content" column seems to be running through the bottom of my "frame".

This is my site:
http://www.eightlbs.com/blog

This is my stylesheet:
http://www.eightlbs.com/blog/styles-site.css

If you look at my stylesheet, I feel my problem lies with either #content (main column), #container (the frame), or #links (right column).

I'm fairly new to the whole CSS thing, but extremely well versed in html etc. So, I'm unsure how to properly utilize the "position" and "float" tags. I feel like I have used them inproperly and/or have them in the wrong places, and that's throwing my site off.

Also, I'm currently centering the whole site within the #container tag with "margin: 50px auto 50px auto;" -- is there a better way that I should be doing this to ensure compatibility with mac/pc/browsers/etc?

This has been a pretty good hack from a standard MT template, so I haven't quite gotten to the point where I can delete unneccessary tags yet. Do you see any I could do without?

Thanks,
- trego
patch
To achieve the centering, I do not use an additional #container, but rather just...

CODE
    body {
                               width:720px;
                               margin: 20px auto 50px auto;
                               padding:0px;
                               color:inherit; background:#000;
                               }


Is this a bad thing to do? It seems to work just fine... you can take a look here.
trego
Thanks for the centering help.

Any idea of how to fix the "frame" issue. I'm trying to put both columns within a 1 pixel frame, or border. It appears now that the main column (#content) is running through the bottom of the frame.
existentialmoo
The problem that you are describing doesn't seem to show up on explorer. When i look at your site i see all content nealty enclosed in a one px border.smile.gif
TweezerMan
Here's one way I think might solve your problem:

Add the following to your template, just before the last closing /div at the bottom of the page:

CODE
<div class="footer">
     & nbsp;
</div>

Delete the space between the "&" and the "nbsp;" - I couldn't figure out how to make it display correctly even though it is within CODE tags.

Then in your stylesheet, add the following:

CODE
.footer {
       clear: both;
       width: 100%;
       }
urbandyke
CODE
<p style="clear: both; "></p>

At the end of your container id to hold upen the fram since you are floating your other ids.
trego
Thanks to urbandyke, that code worked out pretty well. And I'm sorry to report, adding the footer like TweezerMan suggested didn't work.

Since I'm new to all this, I'm not quite sure why urbandyke's code worked, can you give me a little more of an explanation? I'm still trying to figure out how my two columns of text (#content and #links) know to be side by side and not stack on top of each other... I'm used to building tables with code...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.