WP Theme Lesson #11: Widths and Floats
- Filed under: Tutorials
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.
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!!
Thanks Winston. That was a mistake.
Float is simple way to align DIVs. text-align aligns text. Float aligns DIVs.
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!)
Can you screenshot it and send me your codes in a text file?
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.
Dianne,
I tried to reply to your email, but couldn’t. I spotted your problem. Your wrapper DIV wasn’t closed properly.
I never get the hand of floats and clears… I always confuse the two and can never remember which one to use when
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
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.
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
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.
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
That works now ! Sorry SP !!
Err.. why are you using CSSEdit?
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…
The code needs to be:
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
Earlier you used an id, not a class.
Hey Matty,
Where did I use an id for sidebar? I’m trying to find it for fixing.
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
I agree. If it really bothers you about it, then cater your audience’s popular resolution only.
seems to get more and more confusing - a lot of steps but i finally got it lol thanks!
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.
nevermind….I had a ( instead of a {.
It’s me again :D…guess these errors are just standing out like sore thumb to me…sorry…
Exlporer
Hey Daniel - Feel free to point out the errors. I did not beta test this tutorial series.
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/
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.
Since you managed to spot that mistake, I’d say you’re starting to get it.
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???
did you forget to use display: inline for the sidebar?
I used that and it has no effect in IE7….any other sugestions??
Nope. What about the content in the main column? Any images that expand beyond the column’s width?
no images…just plain text…
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
Should my sidebar be on the right, because its stuck at the bottom on both browsers?!
Sorry - I missed out the step with the container in it.
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?
Erik - Is it working in another browser like Firefox? Also, was the stylesheet working before?
Yeah, it’s working in both Firefox and Opera. No, the style sheet has not worked before.
Uh…that’s odd. If the stylesheet hasn’t worked before, how can it be working in Firefox and Opera?
Sorry, I meant is hasn’t worked when opening up the page in IE7.
So apparently, IE7’s capabilities with CSS is very strict. I found one typo, I corrected it and no it works.
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!
it’s not a float right or float left problem. it’s an IE margin problem.
[…] 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 […]
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.
@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.
Why do you have .sidebar in the css if in the index.php you use . Shouldn’t it be #sidebar ?
In the index.php file, I used class not id.
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 
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.
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?
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… ?
if it’s centered in firefox, then you must already have margin: 0 auto; for wrapper.
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.
You might want to use multiple sidebars.
All right, but I could still just name them different things, sidebar1, sidebar2, widget-world, whatever. What about the class designation makes that easier?
Ah ha! I had a look around and discovered this excellent resource that describes the difference:
http://www.bernzilla.com/item.php?id=416
thanks a lot.. it was of great help…
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 “;”
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?
It’s an IE bug. In my experience, it’s usually caused by html comments between floating divs.
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
In response to Snowriders comment:
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.
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.
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.
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!
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…
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
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.
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.
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
your bigger than huge small POTATO..thanks…(- ________-)