rain13 Posted August 12, 2015 Share Posted August 12, 2015 Hi,I am trying to build forum view. However there are few things that I don't understand.1) Why doesnt max-width: 100px; in div.count work? min-width seems to work but when you view this html on 1900x1080 you can see that div.count is clearly more than 100px;1.1) Which is better varying width (min, max) or fixed width?2) why doesn't min-height: 100px; work in li.forum_item > div ?2.2) How to make it work? <html><head><style>li div{ display: table-cell; border-right: 1px solid #000; border-bottom: 1px solid #000;}li{ width: 100%;}div.forum{ min-width: 300px;}div.count{ max-width: 100px; min-width: 75px;}div.post{ max-width: 24%; min-width: 270px; width: 24%;}.placeholder{ display: table; table-layout: fixed; width: 100%;}.list_head{ background: #00285D;}.list_head div{ color: #fff;}.forums{ list-style-type: none; padding: 0;}h4{ margin: 0px;}li.forum_item > div{ min-height: 100px;}</style></head><body><ul class="forums"> <li class="list_head"> <div class="forum">foorum</div> <div class="count">posts</div> <div class="count">topics</div> <div class="post"><span class="placeholder">Last post</span></div> </li> <li class="forum_item"> <div class="forum"><h4>parent</h4></div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li><li class="forum_item"> <div class="forum"><h4>comments</h4></div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li><li class="forum_item"> <div class="forum"><h4>test</h4></div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li><li class="forum_item"> <div class="forum"><h4>child1</h4></div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li><li class="forum_item"> <div class="forum"><h4>child2</h4></div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li><li class="forum_item"> <div class="forum"><h4>Blog</h4>My blog</div> <div class="count">10</div> <div class="count">2</div> <div class="post"><a href="./?p=52" class="placeholder">Re: nbmnbmnb</a>By <a style="color: #00CC00" href="./?p=38">User</a><br><span class="post_time">On 1970 Jan 01 16:05:21</span></div> </li><li class="forum_item"> <div style="min-height: 100px;" class="forum"><h4>Forum</h4>You Love Awesom-O But There Are Still Just A Few Things That Could Go Smoother, Or You Just Would Like To See Something New? Tell Us Here! </div> <div class="count">0</div> <div class="count">0</div> <div class="post"><a href="./?p=0" class="placeholder"></a>By <a style="color: " href="./?p=0"></a><br><span class="post_time">On Never</span></div> </li></ul></body> Link to comment Share on other sites More sharing options...
Ingolme Posted August 12, 2015 Share Posted August 12, 2015 It probably has to do with using display: table-cell on all the divs. Table cells will, collectively, try to occupy all the space of the table they're within. Link to comment Share on other sites More sharing options...
rain13 Posted August 13, 2015 Author Share Posted August 13, 2015 (edited) Tnx for info. How can I make it be 100px height at lease? if I resize li to be >100px then div doesnt change and I didnt find a way to make dives min-height work. Edited August 13, 2015 by SoItBegins Link to comment Share on other sites More sharing options...
Ingolme Posted August 13, 2015 Share Posted August 13, 2015 To have at least 100px in height, just set min-height to 100px on all the elements you want to change. If you want the <div> to be 100px, put it on the <div> element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now