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 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 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 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!] 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
Archived
This topic is now archived and is closed to further replies.