Using the same height: 140px for two columns, but the columns are different

[Bobafart]

Howdy,

I have two looong columns that display data on the front page of a website:  http://www.gabbr.com

Both columns have the following code:

[code]
<div style="border-bottom:1px solid #ccc; height: 140px; ">
[/code]

No other <div>'s have a height attribute.

Yet when you look at the columns.. each news article has a different height.  If you scroll down to the bottom one column ends before another due to this difference in height.  I need them to line up perfectly... how to do this?

feel free to View the Source code

[monkey_05_06]

Content will stretch DIVs. So if one has a longer content then the other it will stretch it out. Seeing as you're printing the news contents to the DIV, setting it to a height of 140 pixels will almost never actually work, but adding this to your CSS will:

[code]<div style = "border-bottom: 1px solid #ccc; height: 140px; overflow: auto;>[/code]

The [i]css[/i] [b]overflow[/b] property tells the browser what to happen if an element's contents overflow its visible area. [b]auto[/b] will tell it to draw scrollbars, but only if necessary. Note that your element must be big enough to draw the scrollbars or this [i]could[/i] be ignored. You can also set this to [b]scroll[/b] which will [i]always[/i] draw the scrollbars (if there is room for them to be drawn), [b]visible[/b] which will tell your browser to draw extra content outside the element's actual area (if you have a background color set it will not be drawn behind this extra content because the extra content isn't inside the element's dimensions), or [b]hidden[/b] which will tell your browser to clip any extra content, but not to show scrollbars.

[b][EDIT:][/b]

Hey Bob, answering this question actually helped me answer a question of my own. I was trying to display a DIV 1px tall, non-breaking, with no content (actually I used &nbsp; to make it non-breaking; for drawing a line in the background color) and I noticed that IE still allowed the &nbsp; (which was being rendered as a whitespace character (' ')) to stretch the DIV. Setting the overflow element to hidden I fixed this bug. Thanks for helping me help myself Bob! ;D

[Bobafart]

thanks Monkey  :)

rather than use overflow I am going to simply trim the news down to a set number of characters.. that way the text will never cause the <div> to stretch

[monkey_05_06]

Okay Bob. I'll take the liberty of assuming you already know how you're going to accomplish that. ;)

[Hooray for answering your own questions!]