Equal Height Columns WordPress Theme
- Filed under: Tutorials
What do you do when
doesn’t work? The safest and easiest way to get your main column and sidebar column to match, height-wise, is to use a background image in order to hide the actual lengths of the columns.
<div class=”maincolumn”> content </div>
<div class=”sidebar”> sidebar content </div>
</div>
Apply a background image to the wrapper
using CSS:
background: url(images/background_image_name.gif);
}
That background image codes should go in your
file. The example above assumes that your background image sits in the folder named, images.
To create or design the background image, use a design software like Photoshop. (That’s what I use.) Create a new file with a width that matches the sum of the main column and sidebar column widths. For example, if your main column is 500px (5 inch) wide and sidebar is 200px wide, and there’s no margins in between the two columns, then your overall width is 700px. That’s how wide your background image should be.
Once the background image is applied to the wrapper
, it’ll repeat itself over and over again to cover the entire length of both columns. So really, all you would need, in this case, is a 700px (width) by 1px (height) background image.
Note: If you use float left or float right for any or both main and sidebar columns, you must use
for the wrapper
too. Otherwise, your background image for the wrapper
will not display correctly.
does
ever work?
you can also use
with the background property so that you only need an image as wide as your sidebar, instead of the width of your whole container.
I’m happy you caught that.
is a joke for us, but it’s common mistake for css beginners trying to match column heights.
How about
in wrapper div ?
btw, thanks a lot for every your post blog on WPDesigner (I browse them all
). I think, WPD will be the next trendsetter on WP community….
Genius! I found this through Google and it worked perfectly. Thanks.
Thansk man nice tuto.. the last part about float must be used at both wrapper and sidebar was just what I was looking for.
Ones again thanks..
/Plat4m
I am new to CSS. This is the information I was looking for. Thank you.
Worked like a charm! Thanks.
well I did all of the above, wrapper looks just like that. the file that is supposed to be the background is called wbg.gif. And its in the images folder in the root of the template (so one level under index.php. Easy enough.
But its not. No matter what the sidebar doesn’t budge. And the wrapper doesn’t fill up with the background image. My body has one already. But I really need everything around the container and sidebar until the footer starts and from the vertical menu to be white.
see here for the design : http://themainentity.deviantart.com/…
I even put a new div around the wrapper and set it to white background but no change. I removed all the files from the server and uploaded. I changed the location of the file or changed the color just to test but no change. :S
Sorta weird cos its really not the first time I set this up like this. As height 100% is just kinda mythical cross browser. I am thinking maybe my computer is playing a game with me LOL.
Right now out of sheer boredom of it, I put the whole thing in a table cell with bg white….that works…..and it is centered but yeah. Suckfest old school.
Hope someone knows what goes wrong.
Yes ! It worked out perfectly. Many thanks.