Fix those div heights

November 28, 2007 at 12:08 pm 1 comment

So let’s say you are wanting to build a killer site. But, you want to use all css and none of those dumb tables. Your layout however calls for two div’s of equal height, but the content within those divs will have fluctuating height. You can try to enter height=’100%’ but that’s useless, as I am sure you have discovered. So what happens? You end up with one div taller than the other, which looks really bad if you are trying to have some nice even borders etc.

“How do I fix this?” you ask. Well it’s simple really. It’s stupid that this works, but it does AND it’s cross browser friendly. First, you create a parent div, such as this <div id=”holder”> and inside of that you add your two columns (or three or four etc). For example, you might call those “leftColumn” and “rightColumn”. These belong nested inside the “holder” div.

Example:

<div id=”holder”>
<div id=”leftColumn”>Some content here</div>
<div id=”rightColumn”>Some more content here with an image so it gets taller than the left column.</div>
</div>

Now, we have to mess with the CSS. In your CSS file, add the new “holder” element with an overflow of “hidden”.

Example:

#holder {
overflow:hidden;
}

Next, we add the magic. Both the left and right columns need to have a HUGE negative bottom margin and equal positve bottom padding.

Example:

#leftColumn, #rightColumn {
float:left;
padding-bottom: 20000px;
margin-bottom: -20000px;
}

Of course, you would want to define each of the left and right columns with more specific information such as borders, backgrounds, width etc. But this is the basic information you need. One word of caution though. When using this method, placing a background into either the left or right columns with a defined position will be difficult to impossible due to the padding and margins.

I hope this helps others out there as it has surely helped me.

Many thanks to Matt Bergsma for tipping me to this trick.

Advertisements

Entry filed under: tech stuff.

Pet Peeve – Im’ers Listen Up! Funny videos

1 Comment Add your own

  • 1. Chris Tennyson  |  August 21, 2008 at 4:17 pm

    Great Stuff!
    I’ve been looking for this solutions for years now. I’ve been using other solutions in Firefox (Tables) that do not work well in IE so I ended up with 2 stylesheets. This is so easy and solves a lot of my cross browser div problems.

    Thanks for the Tip!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


RSS Things I have said…

  • Uhh.. What are you doing? July 4, 2006
    So I was staying with a friend when the family and I went to SoCal on a trip. My friends were gracious enough to let us stay in their bed while they slept on the couch. One night around 2 or so, my buddy got up and had to go to the bathroom. Forgetting that he had let us stay in their bedroom, he came waltzing back into their bedroom. (No, we weren’t “in the […]
    andrewchristensen
  • My son’s friend’s feet stink! July 3, 2006
    So I was staying overnight with the parent’s of a friend when I was on a trip a while back. Unfortunately, I inherited some of the worst parts of my father – mainly foot stank. So, I was at their house in the evening after a long day of being trapped in my shoes. I slipped my shoes off and placed them next to the desk in the bedroom they were letting me stay […]
    andrewchristensen
  • About 3 minutes older than July 3, 2006
    I came home the other day to find a flyer stuffed in my door frame from a local politician. I don’t like people coming to my door to sell stuff. It’s just rude. But then to have a professional liar try to come and convince me that he’s the guy to vote for, give me a break. Not only was he from the wrong party (I typically align myself with one side of the ai […]
    andrewchristensen
  • When hindsight is consistently 20/20… July 3, 2006
    it’s time to pull your head out of your butt.
    andrewchristensen
  • Fat-ass thinks I’m cute! July 1, 2006
    My friend Kendall and I were flying to San Diego for a business trip and we had to take off in one of those prop-job planes out of our rinky-dink airport here is Bellingham. So we get on this plane whose seats are barely wider than one of Paris Hilton’s thighs and Kendall and I are a couple full size fat-asses. We were seated next to each other on one side, […]
    andrewchristensen

%d bloggers like this: