Mar.12.2007

WP Theme Lesson #11: Widths and Floats

Small Potato

tutorial-series.gif Follow this WordPress Theme Tutorial Series from the beginning.

This lesson will cover how to set the width for each DIV (or invisible box) and how to arrange them. It’ll also show you some work-arounds to get your theme to display right or look the same in both Firefox and Internet Exlporer.

Before we start, open the following items: Xampp Control, theme folder, Firefox browser, Internet Explorer browser, index.php, and style.css.

Step 1

The first thing you want to do is decide what’s going to be the overall width of your theme. We’ll use 750px (750 pixels); each 100-pixel is one inch. Your theme depends on the view specs of the majority of your blog’s visitors. What you want to avoid is using a 900px theme for an audience that uses mostly 800px by 600px resolutions, which means your 900px theme would expand 100 pixels beyond their screens. That’s a no-no.

How do you limit the overall width to 750px anyway?
You need everything to sit within a 750px box or DIV. Everything includes: header, container, sidebar, and footer.

Add: <div id=”wrapper”> after <body>
Add: </div> before </body>

Type the following in style.css:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

In CSS, speficially in style.css, the pound sign (#) is how you address a DIV with an id. The period is how you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”> then use .wrapper instead of #wrapper to address the wrapper DIV.

Save both the index.php and style.css files. Refresh the Firefox and Internet Explorer browsers (press F5) to see the change.

Further explanations

  • margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0 bottom margin, and left auto margin. For now, just remember that setting right and left margins to auto is centerting.
  • width: 750px; is self-explanatory.
  • text-align: left; is aligning the text to the left within the wrapper DIV because you will be changing body{ text-align: left;} to text-align: center;

Step 2

Go ahead and change text-align: left; within body{} to text-align: center;

Why? (I’m assuming you’re using Firefox and Internet Explorer 6). Your layout might look right to you, but not to people using earlier versions of Internet Explorer. Remember setting right and left margins to auto is centering? Well, that doesn’t work for all Internet Explorers so body{ text-align: center; } is a fix for older IEs to center the wrapper DIV or box.

(By the way, the text sizes in Firefox and Internet Explorer are different right now. We’ll fix that later.)

Step 3

Make the Header float left with a 750px width:

#header{
float: left;
width: 750px;
}

Step 4

Make the Container float left with a 500px width:

#container{
float: left;
width: 500px;
}

Step 5

Make the Sidebar float left with a 240px width and a gray background: (10px is missing; I know.)

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

Notice, you did not use a pound sign to address the Sidebar DIV; you used a period. Also, remember #ffffff is white? background: #eeeeee; is very light gray. You added a background color to the Sidebar just to see the difference when you’ll add the remaining 10 pixels later.

Step 6

Make the Footer float left and clear both with a 750px width:

#footer{
clear: both;
float: left;
width: 750px;
}

What’s the difference between the Header and Footer stylings? The answer is the presense of clear: both; in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the Sidebar or Container.

Save the style.css file. Refresh the browsers.

Step 7

Add the remaining 10 pixels to the Sidebar by using a margin. Now your sidebar style codes look like this:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

Save file and refresh the browsers to see a 10-pixel space added to the left of the Sidebar.
margin: 0 0 0 10px; specifically means 0 top, 0 right, 0 bottom, 10px left. When size is 0, the px suffix isn’t necessary.

Step 8 (Extra step)

This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox.

To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

That’s the end of today’s lesson. If you have any question, feel free to ask me. I’m here to help, not just to show you the ropes.

And here’s what I have in the index and style files.

If you’ve read the first version of this lesson, forget the screenshot that I showed you. When taking the screenshot, I forgot to turn off the widget plugin for the sidebar, which made the sidebar looked a little different than what you should have.

What's Next?
Winston:

Referring to Step 7 :

“.. 10-pixel space added to the left of the Sidebar.
margin: 0 10px 0 0; specifically means 0 top, 0 right, 0 bottom, 10px left…”

Is there a mistake in the “margin” code? I am confused.

And what is “float”?

Thanks for the great tutorial, btw!!

Small Potato:

Thanks Winston. That was a mistake.

Float is simple way to align DIVs. text-align aligns text. Float aligns DIVs.

Freesitebuilder:

Everything lookes fine in Firefox. But in IE7 the post headers, blogroll and category links, are all centred, and the footer is aligned below the right of the main content.

Can I do anything about this? (apart from recommending Firefox, of course!)

Small Potato:

Can you screenshot it and send me your codes in a text file?

Small Potato:

Can you screenshot it and send me your codes in a text file? Send me the source codes (View > Source), not the codes in the index.php file.

Small Potato:

Dianne,

I tried to reply to your email, but couldn’t. I spotted your problem. Your wrapper DIV wasn’t closed properly.

Everyday Weekender:

I never get the hand of floats and clears… I always confuse the two and can never remember which one to use when :(

Adrian King:

Hi,

I have found your tutorials excellent, thanks for offering these.

I am working through them now and have stumbled across my first problem, the sidebar is on the right? Any ideas. I have float left.

Thanks again

Small Potato:

You have float left, but the sidebar comes after the container. That’s why it’s on the right.

If you want it on the left. Move the sidebar area above the container area.

Cenk:

Do you really think the majority of people out there use 800*600 resolution? I would really like to have a 3 column theme someday and would like to have 1024*768… Would that be a problem? Is there someway for a theme to recognize user’s screen resolution and adapt itself accordingly? I know I am asking for too much :)

Small Potato:

No I don’t. The popular resolution is 1024 x 768. My lesson is only an example.

For a theme to adapt to the users resolution, it must use percent, instead of pixels, for widths.

Fran6:

Hi SP,

I have a problem. Things changed with the but for the others (wrapper, header, etc…), nothing changes… I edited it in CSSEdit and the boxes are fine but nothing changes in the browser…Do you have any idea ??
Thx, Fran6

Fran6:

That works now ! Sorry SP !! ;-)

Small Potato:

Err.. why are you using CSSEdit?

Fran6:

I was just checking that the div were at the good place. I love that soft for SEEING things ! ;-) Everything is OK now, that was just un syntax problem in the CSS…

SGT MattyW:

The code needs to be:

sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

Earlier you used an id, not a class.

Small Potato:

Hey Matty,

Where did I use an id for sidebar? I’m trying to find it for fixing.

snowrider:

Cenk,

Since 80% of users have a screen resolution of 1024×768 or more, some web developers are making the decision to not bother with the 800×600 resolution. You should really think about the target audience for your site, but I believe it’s been years since computers were sold with a default of 800×600. Just weigh the pros and cons for your site and how much you want to cater to the small 800×600 crowd.

Here’s a link with the stats. Scroll down near the bottom for the display resolution stats.
http://www.w3schools.com/browsers/browsers_stats.asp

Small Potato:

I agree. If it really bothers you about it, then cater your audience’s popular resolution only.

wzjz:

seems to get more and more confusing – a lot of steps but i finally got it lol thanks!

Anthony:

This is strange, the changes since adding the (div id=”container”) seem to be working for me in IE and Opera, but not Firefox! hmm. I’m using the Fifefox version 2.0.0.3. I’ve gone over my code several times, and I’m not sure what I’m missing.

Anthony:

nevermind….I had a ( instead of a {.

Daniel Barr:

It’s me again :D …guess these errors are just standing out like sore thumb to me…sorry…

Exlporer

Small Potato:

Hey Daniel – Feel free to point out the errors. I did not beta test this tutorial series.

Shaun:

Progress report.. Ok so I found this site about 3 – 4 hours ago.. I’m up to lesson 12.. Hopefully I can complete all the lessons today :) Had only 1 frustrating moment with validation.. but that’s out of the way now.. Time to style it up!

Once again, cheers for the nice lessons \m/

Andy:

Excellent tutorials. I’m doing some CSS now on my tutorial theme but I came back here because I got stuck formatting the footer.

I don’t know if this is your error or mine but in Step 6 above, the formatting is under #footer{ but in my index.php I have class=”footer” not id=”footer” so I changed #footer{ to .footer{ and now the formatting shows up when I refresh my browser whereas it didn’t before.

Was that just lucky or am I starting to understand this stuff?

Thanks again for great tutorials.

Small Potato:

Since you managed to spot that mistake, I’d say you’re starting to get it.

ciprinho:

hy…i did all the steps as you said untill here with no errorrs untill now…in Firefox I see the sidebar where it should be( on the right), but in IE7 the sidebar is under the posts, before the footer…any solutions???

Small Potato:

did you forget to use display: inline for the sidebar?

ciprinho:

I used that and it has no effect in IE7….any other sugestions??

Small Potato:

Nope. What about the content in the main column? Any images that expand beyond the column’s width?

ciprinho:

no images…just plain text…

ladynada:

What do you do if you want to use percents? make which sections add up to 100%? I mean what if I add a left sidebar, so would that be like 25% then container 50% then sidebar (right) 25% and wrapper 100%?
thanks,
nada

Rob:

Should my sidebar be on the right, because its stuck at the bottom on both browsers?!

Rob:

Sorry – I missed out the step with the container in it.

Erik:

I am having a problem with IE7. The styles I have set in my .css file are not being presented in IE. All the links are still default blue/purple and everything shows up on the right side of the browser.

What can I do?

Small Potato:

Erik – Is it working in another browser like Firefox? Also, was the stylesheet working before?

Erik:

Yeah, it’s working in both Firefox and Opera. No, the style sheet has not worked before.

Small Potato:

Uh…that’s odd. If the stylesheet hasn’t worked before, how can it be working in Firefox and Opera?

Erik:

Sorry, I meant is hasn’t worked when opening up the page in IE7.

Erik:

So apparently, IE7′s capabilities with CSS is very strict. I found one typo, I corrected it and no it works.

Lone:

I would be interested to know why you don´t use float: right and float: left on content and side bar?

That way you could leave out the display:inline, so is there a good reason not to do that?

regards, Lone

PS: Great trial and error tutorial, very instructive, thanks!

Small Potato:

it’s not a float right or float left problem. it’s an IE margin problem.

All about Wordpress - Themes - Plugins » Creating a WordPress theme from scratch:

[...] Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and Diving Index #15 [...]

David:

This is a great tutorial – have been working through it today and really learning a great deal about WordPress, PHP and even CSS (which I was a bit familiar with before).

Two questions:

1. I prefer to use fluid widths (i.e. percentages) instead of pixel values. If I set the container to say 80% to leave a slight margin, do the various id tags need to add up to 100% (i.e. 100% of 80%) or should they add up to 80%? I’ve done it to 100 and it looks okay but I was just curious what the right answer is.

2. If you use fluid widths and percentages, does that negate the need to include display: inline for IE?

All the best, David. and thanks again.

PHP Developer:

@Cenk

You have a couple of ways out:

In theory, you could use a php script as your stylesheet, and in that script you could find out the screen size and adjust accordingly.
You could make a few seperate stylesheets and through php select the one that is right for the screen size.
You could go with David and use fluid widths.

Adriano:

Why do you have .sidebar in the css if in the index.php you use . Shouldn’t it be #sidebar ?

Small Potato:

In the index.php file, I used class not id.

Jirafx:

How do you place eliminate the margins that auto exist when you place a background in a div? The only way I tried was by putting the background in the body tag of the CSS file. Any other way to eliminate the margins that exist at the top and side?

Anyway, awesome tutorial series. Helped me alot. :) I’ll be sure to give you a mention when my site is up ;)

PB:

Hey, the css affects changers in IE but not Firefox. How do I fix it. Everything you said, I did, but when I started working on the css, the changes dont show up when I check it with Firefox.

Small Potato:

That’s like asking me how to fix your car because it’s broken. “Where do I start fixing?” You have to show me the problem. For support, use the Wpdesigner forums.

There’s no reason Firefox can’t display what IE is displaying. Have you tried refreshing the page?

linnette:

when I text-align: center; the wrapper, everything stays centered in firefox / explorer. I re-checked my wrapper div and it looks ok to me… ?

Small Potato:

if it’s centered in firefox, then you must already have margin: 0 auto; for wrapper.

Jared:

I have a question prompted solely by curiosity.

What is the rationale for making the sidebar a class while other blocks are picked out by an id? They are both block-level containers and aside from using Javascript to getElementByID or getElementByClass, or using filename.html#divID, I can’t think of a reason to separate them in this way.

Small Potato:

You might want to use multiple sidebars.

Jared:

All right, but I could still just name them different things, sidebar1, sidebar2, widget-world, whatever. What about the class designation makes that easier?

Jared:

Ah ha! I had a look around and discovered this excellent resource that describes the difference:
http://www.bernzilla.com/item.php?id=416

tarun:

thanks a lot.. it was of great help…

Reztar:

wow… missing of one “;” in my stlye.css giving me a headache. thanks for putting your codes SP, I can compare and found the missing “;”

Colleen:

Hello,
When I perform all the steps in your tutorial, I end up with
the following text displayed in my footer in IE6 (FF browser is OK):

Copyright © 2007 Golden Orb Blog
log

When I view the source I see:

Copyright © 2007 Golden Orb Blog

I have had this problem many times in the past and I still haven’t figured out the cause. I guess it is probably an IE bug?

Small Potato:

It’s an IE bug. In my experience, it’s usually caused by html comments between floating divs.

Colleen:

BIG Small Potato,

Thanks for your response – so I get penalised by IE for putting multiple comments in my code?

Anyway, forgetting about IE and its bugs, I would really like to thank you for putting this tutorial series together. I have good knowledge of CSS and reasonable knowledge of PHP and these tutorials have given me the confidence to develop my first site for a client using a CMS and writing my own theme the way I want it.

I agree with others people’s comments, you should get some payment for all your work here – I agree with what another person said i.e. to put together a PDF with all the tutorials in it and charge people a small amount for it. I would pay up to $5 AUD for it. You have helped so many people including myself and I think you should be rewarded.

I followed your tutorials like a breeze and the only place I stuffed up was on lesson 15 with that code. My 1st mistake was not being in code view and my 2nd mistake was placing spaces on either side of nextpage. I am not telling you to make this change, but I think it would perfect your tutorial if you mentioned adding in code view and don’t include any spaces.

So thanks a million…
Colleen from Australia

Josh:

In response to Snowriders comment:

“Since 80% of users have a screen resolution of 1024×768 or more, some web developers are making the decision to not bother with the 800×600 resolution. Here’s a link with the stats. Scroll down near the bottom for the display resolution stats.” http://www.w3schools.com/browsers/browsers_stats.asp

While I agree that majority of visitors resolutions will be greater than 800×600, you can’t use http://www.w3schools.com as a comparison since their statistic information comes from their own visitors. I would venture to say majority of the people visiting http://www.w3schools.com are interested in web development and most likely have higher res screens. You have to take into account YOUR SITE’s visitors when picking the width of your site.

Addies:

SP,

I believe there is a mistake in the footer part of article. You placed a pound sign “#” instead of a dot “.”

I think I am right because we have used a class for footer. Please correct me If I am wrong.

Thank you for such great tutorials.

Addies:

SP,

I guess I have used a class in footer and you used an ID there. So we both are right :) – But using an Id is appropriate I guess as footer is unique and its only one.

:)

Travis:

Yeah…so I don’t think that my CSS file is being read correctly…NONE of my changes are showing up in the browser. I am working online using FTP on a Mac and previewing in Firefox and Safari. Also, this is a fresh install of WP 2.5.

Thanks!

Han:

ok, so is the index.php file that potato linked at the end of this tutorial supposed to validate? I’m getting 40 something errors on his file…I’m still trying to validate here so I wanted to see if I could copy what he had so far…

liza:

Hello Small Potato
I’m having a problem with step 2
When you say change text-align to center it doesnt looks alright in firefox (the latest version)
all the bullets and calendar is still on theleft side.

Hope you can help
Liza

Shep:

My sidebar appears consistently on the bottom. I double-checked both files against your links at the bottom of this lesson, and they seemed fine, but cut-and-pastes of the index.php file would not XHTML validate.

In frustation, I wound up just cut-and-pasting your linked files at the bottom of the lesson into my index.php and style.css files, and the sidebar STILL appears at the bottom. Very frustrating!

Firefox/2.0.0.14 on a Macintosh.

liza:

Hello again Small Potato,
I have tried to add background-image for the #wrapper in the css but it wont work in firefox only in internet explorer.
Hope you can help.

Gauden:

Well I have the same Issue as Liza.. I just can’t make the background image work for the #wrapper =(
It shows “fine” in IE but firefox won’t do anything … not even if I only change the color… this problem seems to happen when I make the container and the sidebar float… it looks like the wrapper won’t wrap them at all… and sometimes it only wraps around the #container

HHHHHHHEEEEEEEEEELLLLLLLPPPPPPPP!!!!!!!!!!!!!!!!!!!!!!!!!

T_T

jicoro:

your bigger than huge small POTATO..thanks…(- ________-)

inservo:

Hi everyone…

first let me please thank SP so much for this awesome tutorial series. It really is great and besides unterstanding the customizing of WordPress it gives me a deep look into the world of PHP and CSS.

I have one problem:
I followed until this lesson without any error, but now the sidebar in IE (version 6.0) shows below the content and before the footer. I made sure that I declared the sidebar as a class (not id) and it still shows below content? In Firefox btw. everything shows up correct…

Your help is very much appreciated…

inservo:

actually I found out on my own and it may be interesting for anyone discovering the same problem:

I used a much to long name for the calendar (16 characters in h2) therefore WordPress didn’t put it in 2 rows. I now split it up in three seperate rows and there it goes (sorry for rhyming ;-) ). Those characters took more than the 240 px available.

Thanks again for the amazing tutorial.

eddie:

i am trying to get there to not be gaps between the header and content in firefox. also there is a gap above the header to the top of the page. it works fine in ie. it also works fine when the php code is removed. is wordpress adding additional padding or something

norman:

thank you so much for the tutorial.
i found if the screen is over 1250px(750+500) in width, there would be a problem by “float” , the “container ” would be on the right of the “header”, but not under…

icetrap:

Hi!

Why the blog is not centered both in mozilla and in explorer?
(I’m using a resolution of 1400×900, the blog width is 750)

Thank you

icetrap:

No wonder, I had only written “width” in a wrong way in the counter!
Thank you

Andy:

Nice tutorial Well Done.

I would love to know how to implement a 2nd sidbar. Is it loads of extra work or just a few lines of code?

Kabbage:

Was having the same problem with my changes not showing up in Firefox, but looking fine in IE. In Firefox, you gotta go into Privacy, under Tools > Options, and flush your site’s cookies.

Eddie:

things are going well with the tutorial so far teacher :)

but i have a similar problem to others with my sidebar not being on the right but under the content.

earlier you replied to someone asking if any of the pictures are bigger then the width of the sidebar

and in this case thats true one of my pictures is bigger then the width of the sidebar,

so should i just delete the picture or make it smaller, or is there another way around this with code.

thanks ed.

Eddie:

I took out the photo altogether but it still dosnt seem to make a difference.

I put in float right instead of float left and it goes to the right but its still under the content.

I’ve compared my code with yours, and it is now exactly the same, yet sidebar is still not on the right.

Not sure what else to do, Any suggestions?

Eddie:

I thought for a long time my code was exactly the same as Small Potatoes.

Note to everyone:

check all tiny { and ;

I was missing one of both, wow, how did I do that, i feel dyslexic.

A good idea is to format the code the same way he does and then paste his over yours and undo

do this over and over until you see the difference, obviously if your not a total spanner like me

you should just find the error yourself, but this really helps if your stuck.

Problem Solved.

sirryche:

i was reading this blog and am learning alot. i am trying to fix my site. it works great in ie7 but everythings off in all other browsers. i was attempting to put a wrapper on my site to control size but in my index.php i dont have the standard html. it has no body tags and tells about it refering site to the wp-blog header.php. i enter that and its just php codes. so would i put the whole php script in a <div set up?? im so confussed. or is it becouse of the theme im using.

rishi:

hey! I thought i followed these tutorials to the T….but somehow, the sidebar ends up at the right bottom instead of at the side…used all of Small Potato’s suggestions – yet, it does not seem to work out…

any idea why?

Hey Small Potato…great tutorials btw….i was able to make some tweaks to the same CSS myself using your tutorials….got to know the elements and the structure….very nice tutorials…hope to make my own unique theme very soon….

The Ambuscade:

[...] Basic hacks for layout design for Internet Explorer WPDesigner makes some recommendation on how to do away with bugs especially in the earlier versions of Internet Explorer (especially earlier than IE6) (tags: IE Internet-Explorer obeertym web_design design wp_design) [...]

T:

Hey,
Just a question…
Step 1/2
“# text-align: left; is aligning the text to the left within the wrapper DIV because you will be changing body{ text-align: left;} to text-align: center;”
=P is for Internet Explorer to fix but to be aligned to the left in the grand finale, right (actually left – corry could skip the joke)?

If that’s so, well, I text is all centered, I use mac (a problem using web) and both Firefox and Safari understood to align in the center.

My code or macintosh? =S

Thanks!

Maria:

I was wondering. Is there a way that I can position the headers, sidebars, etc with absolute positioning?

Kameron:

DorNFJ0Eb6YHb

clio44:

Hey, great tutorial! A friend had already made my site, but I’ve been troubleshooting an annoying little problem and found your site, which is teaching me all kinds of new and wonderful things….. :D

My issue: everything works fine, until I add a “more …..” button in my main page posts. Sometimes it works fine, but other times, it makes my sidebar go to the bottom. My only clue is that normally, I have a picture that separates each post, and when this mysterious moving sidebar thing happens, the picture that’s normally at the bottom of my post (on the main site) has now gone to the bottom, right above where the sidebar now is.

A different friend from the one who made my site entered the code to put the post-separating picture in, so I’m suspecting he might have made a small error that only actually causes a problem occasionally (since I only noticed it lately).

Any idea what’s happened?

Thanks again!

Graham Macleod:

First off. Kudos on the series.
It’s a nice standards compliant design using symantic markup.

Can I offer a few notes?

Taken from http://codex.wordpress.org/Wrapping_Text_Around_Images, the following css should maybe be mentioned in order to get text wrapping around images.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

and since you have all post content endiong with , chuck in…

hr {clear:both;}

to avoid larg images with small amounts of text causing the next post to jump up next to the large image.

Graham Macleod:

Actually in my hastiness I posted some absolute bollocks there.
The style listed for hr will not work.
after

type

Booya.

loren:

Hi, I have a problem with this tutorial.

See: http://www.fisherstudios.ca/stephanie/

the WRAPPER div is not showing up even though I gave it a background color of white.

what can I do to solve this?

Mushtaq:

HI!
Big small Potato
1st thanks for providing and sharing such a wonderful set of information.
After finishing all the alignments and floating of sidebar i found that “next page” link cannot be seen in firefox
i am using firefox version “Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5″
thankx again
take care

Mushtaq:

Hay! it worked when i cleared my cache.

Raeffer:

this is fun!!

one problem though and it has been asked in the above comments #53 and your reply #54 but i cant work out the answer…sorry :( … Any chance you could provide a more detailed answer for a CSS mongstick like me.

‘if it’s centered in firefox, then you must already have margin: 0 auto; for wrapper’ was your reply but I thought you asked us to make margin: 0 auto 0 auto; in the #wrapper{}????

headjog:

@Liza #70 & Lauren #93:

The wrapper div doesn’t expand around it’s contents (in FF) unless you tell it to. (It does in IE but that’s a bug apparently).

Put this in the #wrapper css: overflow:auto;

and it should work.

Tip: get creative in google (e.g. “css wrapper div background bug firefox”) if you have css bugs, the solutions are a click away in most cases.

Melisa:

First, thank you very much for the tutorial. This is much better than reading a book.

I had a problem with my sidebar under the container instead of the side. This error happened on Explorer (version 6), while it’s fine for Firefox.
I found out the problem was the post content. I had a very long “………….” that went over a few line. Once I reduced it to within a line, the sidebar went to the correct place.