Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- 8 job boards, for freelance web designers, that don't suck
- Open source Dreamweaver alternatives
Categories
Using Faux Columns for same column height
Posted on Monday, November 12th, 2007 under CSS, site update by Dustin Brewer.Are you trying to get two or more columns to appear to be the same height with CSS? There is a trick in doing this that is extremely easy and by far the best method. This is a question that I hear quite a bit, because currently CSS by default doesn’t allow you to be able to do this. If you are wanting two columns, say a navigation column and a body copy column, to be the same height you can set them at a fixed height but this isn’t a good idea. Especially if you have a dynamic site, because with a dynamic site it is impossible to tell how much content is going to be where in your site. You definitely don’t want to have to go in and “manually” fix the column height every time the site gets updated.The trick to getting columns the same height in CSS is over complicated in most tutorials on the subject. There are typically lengthy explanations that don’t make a lot of sense. I can sum it up in one sentence and most people will get it I’m sure. I will go on to explain it a little more and any kind of bugs that may occur when using the faux columns method.
What are faux columns in CSS?
Basically, faux columns are when you use a repeating background on the div container of two divs. Simple enough, right? Let me explain a little more in detail how this all works. When you have a background that repeats along the Y axis (repeat-y) your div container will wrap around the two (or more!) divs that are within it. Because this background is repeating whatever styling is on the image will repeat also. So if you have two different colors or some kind of shadow on this image it will appear as though your two columns are going the same length all the way down. This allows for the two columns to be any different size as long as the container div is wrapping around them.
I have an example of faux columns below, I’ll explain a little bit more how this works after the code jump.
This is the basic CSS,
#divContainer {width: 800px;background: url(images/bg.jpg) repeat-y;}
#div1 {width: 200px;float: left;}
#div2 {width: 600px;float: right;}
Now for the HTML,
<div id="divContainer">
<div id="div1">
<p>This could be a simple navigation column.</p>
</div> <!-- div1 -->
<div id="div2">
<p>This would be a much larger column because it would be the body copy for the site. You would typically want to make this text very long to show exactly what the site is doing. So copy some lorem ipsum text in here if you are going to test it this way. I'll include a tutorial zip file I think on this one to show off what it does exactly.</p>
</div> <!-- div2 -->
%lt;br style="clear: both;" /> <!-- This is to make sure it wraps -->
</div> <!-- divContainer -->
As you will see, it is pretty simple to use. I have included an example file below that can demonstrate exactly what it does and how to use it. You will notice I included a break tag in the code, the reason I did this is that the container divs can have trouble wrapping around the content. I recently wrote an article over getting divs to wrap around the content that will explain it in a little more detail.
So now you can use faux columns in CSS
It is that simple, if you have any questions on its uses by all means leave a comment below and I will answer them for you. There are other ways to get your columns to appear to be the same height, mostly just with javascript which can cause other issues. I have, however, used javascript before to do this in certain situations where it isn’t possible to use faux columns due to various design decisions.
For those of you that want to see this idea in action you can download a faux columns tutorial or you can also view the faux columns demo here.
Whats Next?
6 Responses to “Using Faux Columns for same column height”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout my web design portfolio.
Your break is showing the lt thing in your example. Just thought I would let you know. Good post.
I have been trying to figure out how to do columns with CSS for some time this is actually exactly what I was looking for. Especially with the demo available for this tutorial.
Spectacular post!
I have spent ten hours today looking for a way to make a header box with a repeating background. All but your page omit the simple steps or miss the subject entirely. I totally agree with your comment that most tutorials are hard to understand.
I have been so frustrated with so many tutorials that do not or will not write so newbies can understand that I am starting to collect the ones that do. I have placed a link to you at http://finditmall.com/computer/dir-computer.htm
Thanks
Really great post. I am really glad to read this entry. Thank you for writing great articles.
I enjoyed reading this post. I want to read more on this topic.. Thanks for sharing this amazing info.. Anyway, I
Thanks, Dustin. Is there, by any chance some type of video tutorial of exactly what you are showing us here?