How do you handle fluid column height?
Asked Modified Viewed 1,689 times
asked
This would probably be one of the 101 of grid design. <div>'s does not handle relative height matching with its siblings unlike <td>, they match each other's height.
I currently use : display:table-cell; on each of the columns.
Another method that I have tried (was way unstable cross browser) - on each of the columns, do a margin-bottom:-99999999999px; padding-bottom:99999999999px;
or Is there something I have missed? So, anyone have a common CSS solution to this?
Regards
I currently use : display:table-cell; on each of the columns.
Another method that I have tried (was way unstable cross browser) - on each of the columns, do a margin-bottom:-99999999999px; padding-bottom:99999999999px;
or Is there something I have missed? So, anyone have a common CSS solution to this?
Regards
answered
Not sure I'm following you. Need a image please?
min-height: max-height: hien?
min-height: max-height: hien?
Edited by Craig on 23-08-2014 11:17,
answered
Explain what you wanna do? You want two (or more) div that are side by side put in another div to have the same height relative to the div that contains them?
answered
Hey guys, I don't think i can link offsite. (Regardless to explain it better Just gonna link it this time). See the image - problem and fix. There are several models. I'm using a table-cell approach.
the problem is 1 div is shorter than the next.
not equivalent
This is a good article for it...
http://css-tricks.com/fluid-width-equal-height-columns/
My first question was - what's your preference?
the problem is 1 div is shorter than the next.
Code Download source
echo "<div>\n";
echo "<div style='background:#c1c1c1;'>".lorem_ipsum('500')."</div>\n";
echo "<div style='background:#c2c2c2'>".lorem_ipsum('300')."</div>\n";
echo "</div>\n";
not equivalent
Code Download source
echo "<table><tr>\n";
echo "<td style='background:#c1c1c1'>".lorem_ipsum(500)."</td>\n";
echo "<td styl='background:#c2c2c2'>".lorem_ipsum(300)."</td>\n";
echo "</tr></table>\n";
This is a good article for it...
http://css-tricks.com/fluid-width-equal-height-columns/
My first question was - what's your preference?
answered
display table is the way to go, works in all browsers and makes sense, you don't need tons of CSS code and hacks.
answered
I still say min-height:
answered
min-height won't work, just as using height you'd need to know the height of the tallest div before setting it.
Setting min-height 100px while the tallest div is 200px will just give others a height of 100px.
Test case here http://jsfiddle.net/5s54052q/5/
Setting min-height 100px while the tallest div is 200px will just give others a height of 100px.
Test case here http://jsfiddle.net/5s54052q/5/
answered
Ah, good point Dan, unless his columns are side by side?
answered
Min height is not dynamic, but it works if you know for a fact the approx length of the divs and set a larger number for the min height.
If we are talking about dynamic content like center, left, right panels for grid.. min height wouldn't be the optimal solution since when one of them columns has content that is greater than the min-height, it will still be uneven height of all 3 column.
I think ?
If we are talking about dynamic content like center, left, right panels for grid.. min height wouldn't be the optimal solution since when one of them columns has content that is greater than the min-height, it will still be uneven height of all 3 column.
Code Download source
<div style='display:table'>\n
<div class='display:table-cell;'>LEFT</div>\n
<div class='display:table-cell;'>CENTER</div>\n
<div class='display:table-cell;'>RIGHT</div>\n
</div>\n
Code Download source
<div class='display:block; overflow:hidden;'>\n
<div class='display:block; position:absolute; padding-bottom:999999; margin-bottom:-999999px'>LEFT</div>\n
<div class='display:block; position:absolute; padding-bottom:999999; margin-bottom:-999999px'>CENTER</div>\n
<div class='display:block; position:absolute; padding-bottom:999999; margin-bottom:-999999px'>RIGHT</div>\n
</div>\n
I think ?
Edited by Chan on 25-08-2014 06:35,
Category Forum
General DiscussionLabels
None yet
Statistics
- Views 0 views
- Posts 8 posts
- Votes 0 votes
- Topic users 3 members
3 participants
Craig 14
- Fusioneer, joined since
- Contributed 4,462 posts on the community forums.
- Started 212 threads in the forums
Chan 0
Lead Developer of PHP-Fusion
- Super Admin, joined since
- Contributed 3,842 posts on the community forums.
- Started 232 threads in the forums
- Started this discussions
- Answered 6 questions
JoiNNN 10
- Veteran Member, joined since
- Contributed 850 posts on the community forums.
- Started 100 threads in the forums
Notifications
Track thread
You are not receiving notifications from this thread.
Related Questions