Bobafart Posted December 17, 2006 Share Posted December 17, 2006 Howdy,I have two looong columns that display data on the front page of a website: http://www.gabbr.comBoth 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 Quote Link to comment https://forums.phpfreaks.com/topic/31014-using-the-same-height-140px-for-two-columns-but-the-columns-are-different/ Share on other sites More sharing options...
monkey_05_06 Posted December 17, 2006 Share Posted December 17, 2006 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 to make it non-breaking; for drawing a line in the background color) and I noticed that IE still allowed the (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 Quote Link to comment https://forums.phpfreaks.com/topic/31014-using-the-same-height-140px-for-two-columns-but-the-columns-are-different/#findComment-143149 Share on other sites More sharing options...
Bobafart Posted December 17, 2006 Author Share Posted December 17, 2006 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 Quote Link to comment https://forums.phpfreaks.com/topic/31014-using-the-same-height-140px-for-two-columns-but-the-columns-are-different/#findComment-143174 Share on other sites More sharing options...
monkey_05_06 Posted December 17, 2006 Share Posted December 17, 2006 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!] Quote Link to comment https://forums.phpfreaks.com/topic/31014-using-the-same-height-140px-for-two-columns-but-the-columns-are-different/#findComment-143180 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.