I see this often. People want to make a website with two or more columns and want them to be the same size, automatically accommodating the content. I’ve seen many solutions. Some set a fixed height. Others tend to use min and max CSS values with convoluted and difficult to manage code. Some use other CSS approaches which require changing the code for each browser. Programmers sometimes go the route of applying advanced JavaScript to change the width and height dynamically. Lastly, some resort to using tables.
It’s not that complicated.
In most cases, a real simple CSS strategy will take care of this. The code is clean, simple, and easy to manage. The code below gives you what you need:
<html> <body> <div style="position: relative; width: 400px; background-color: #FFFF00;"> <div style="float: left; width: 100px; background-color: #0000FF;">a<br />a</div> <div style="float: left; width: 300px; background-color: #00FF00;">a</div> <div style="clear: both;"></div> </div> </body> </html>
Basically what we’re doing is putting the left and right column (or however many you want) inside one large DIV tag that will hold everything. This large DIV will adjust to the height of the tallest DIV inside it.
I’ve placed these DIVs inside using float left (but feel free to use relative position instead). I create one DIV for each column and adjusted the width accordingly. Since I’m using float, I’m adding one more DIV at the bottom and giving it a clear both value. What this will do is stay underneath all the other DIVs I’ve created, forcing the larger containing DIV to take the height of the tallest DIV.
The explanation might sound complicated, but it among the best solutions for this problem, and the most versatile.
To customize this, simply change the values in the style tag to what you need them to be. This code is simple, valid, and clean. Best of all, it works well in virtually all environments.
Adding a Background
You might have noticed that the above example is a bit bland. It works, but probably will not fit the purposes you need. Chances are you’re creating something like a two-column layout with a sidebar and main content area. However, you’ll want their backgrounds to extend to the bottom of the page.
The solution for this is simple as well. All we need to do is add a background image to the main containing DIV. This background will give the illusion of two separate columns.
<html>
<body>
<div style="position: relative; width: 400px; background-image: url('background.gif');">
<div style="float: left; width: 100px;">Line 1<br />Line 2<br />Line 3</div>
<div style="float: left; width: 300px;">Content</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
The above code uses a background image on the containing DIV and does not use background colors of the inner DIVs. I only added those colors to illustrate their positions. the above code will look something like this:
You can also download the source code here: creating_a_web_page_with_equal_column_heights.
I like what you guys are up also. Such smart work and reporting! Keep up the excellent works guys I’ve incorporated you guys to my blogroll. I think it’ll improve the value of my website
.
Good day. Basically want to place a swift statement and inquire where you grabbed your page template I am creating own web-site and absolutely really like your specific theme.
Corrie, thanks for the compliment! I designed this myself, but if you’d like, my company can make a template for you. Just contact me and I’ll see what I can do.
Hmm… beats doing this with JavaScript!
Good solution! Thanks! I’d think that this would be simpler to code since this is such a common format in websites.
Hello, you used to write excellent, but the last few posts have been kinda boring… I miss your great writings. Past few posts are just a little out of track! come on!
My last few posts have been research-intensive. I’ll be uploading more development strategies soon!
Heya i’m for the first time here. I came across this board and I find It truly helpful & it helped me out much. I am hoping to offer something again and help others such as you aided me.
It’s great site, I was looking for something like this
My brother suggested I would possibly like this website. He was entirely right.
Would you mind if I share your blog with my facebook group?
Not at all. That sounds great!
Woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between usability and visual appearance
Well, that is the focus of our site… usability and visual appearance. I’m glad you like the design. Thanks for reading!
I figured this out a while back. I’ve been doing something close to this, but in a much more complicated and convoluted manner. I was using JavaScript and everything. I suppose I’ll give this a shot. It seems to be a good solution. Thanks!
I like this approach. I use it sometimes, but I more so use css positioning instead of floats. I like floats, but I think css positioning is just the better way to go for most things. I mean, it can do everything floats can do, pretty much.