float, padding, margins, wrappers, %0px1.2em!11!! oh my!

September 17, 2008 11:03 AM

I'm going crazy trying to adjust my blog template. It seems that when I change the browser window size, the body, sidebar, and header all move independently. If I make the window wider, the right edges of the sidebar and header do not align. If I make the window less wide, the whole sidebar crunches into body text (fine) and eventually gets kicked off the side by the body (not fine). Ideally, I'd like them all to line up, move/scale together side-to-side, and not get kicked around.

I know this has to do with adjusting float, padding, margins, wrappers, percentages, and pixels. I've been tweaking with the variables, hitting preview, observing changes, for way too long. If somebody could please help me fix this, or point me towards an easy tutorial that won't take up too much of my time to decipher, I'd be forever grateful. Thanks!

Blog is in my profile, but I would be really appreciative if it were NOT linked to in this thread. Thanks!

posted by iamkimiam to technology (4 comments total)

I would personally replace your embedded css with this.

I have made your #header-wrapper a width of 1000px (which is just right for most resolutions these days)

Instead of using percentages in #main-wrapper and #sidebar-wrapper I used width: 555px; and width: 345px; and I gave #sidebar-wrapper position: absolute;

These are all fixed widths and do not scale. I personally don't think scaling is a great idea. If you still want scaling, I am sure somebody will come in soon and assist you with that.

Another thing.. Instead of "tweaking with the variables, hitting preview, observing changes" download Web Developer for Firefox, choose CSS and Edit CSS. Once you have your CSS like you want it, copy it out and paste it into the real CSS file.
posted by B(oYo)BIES at 11:24 AM on September 17, 2008

Thanks! B(oYo)BIES! I'm trying to work with what you've done here, and there's an open tag somewhere...trying to find it. Will download the Web Dev for Firefox...that's going to make life a LOT easier I can tell already!
posted by iamkimiam at 11:30 AM on September 17, 2008

After a very cursory look at the source code, it looks like you need to have all the components (body, sidebar, header) nested in one div. Your crosscol-wrapper doesn't seem to include the sidebar, which appears at the bottom of the page for me (I'm using Chrome). Instead the tag is closed before opening up a different div for the sidebar-wrapper.
posted by desjardins at 11:32 AM on September 17, 2008

B(oYo)BIES for the win!
posted by iamkimiam at 12:21 PM on September 17, 2008