March 14, 201412 yr Hey all I seem to be having some trouble using max-width/min-width on a couple of inline block elements not sure if i'm trying to do something that isnt actually possible or that i'm just approachingh it in the wrong way - hopefully someone here maybe able to help Basically I have a a content div floated left with a max-width and min-width assigned to it and set it to display:inline-block. Most of the time the element should be max width with an aside to the right of it. The aside also has a max-width and min-width with a display:inline-block Sometimes the aside will have an oversized div included and I want the content to resize down to allow them to still sit side by side however both elements take on max-width and will not sit nicely together...example: <!doctype html> <html lang="en-gb"> <head> <style> section{ width:100%; color:white; } .contents{ display:inline-block; min-width:45vw; max-width:65vw; background-color: red; float:left; } aside{ display:inline-block; min-width:30vw; max-width:45vw; background-color: blue; } .normal{ width:25vw; } .large{ width:25vw; } </style> </head> <body> <section> <article> <div class="contents"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit viverra turpis non tincidunt. Quisque dictum sapien vitae nulla consequat scelerisque. Maecenas ac vestibulum tortor. Nunc mattis turpis a elit viverra cursus. Duis a purus dolor. Integer vel elementum augue. Integer et egestas leo, ut vestibulum quam. Suspendisse nec pulvinar lorem. Donec sed eleifend elit. Pellentesque ut congue dui, quis malesuada elit.</p> <p>In sed fermentum nibh, a varius leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ultrices hendrerit arcu, at suscipit nisi. Pellentesque eget mi vitae ante facilisis hendrerit. Aenean ut pellentesque felis. Pellentesque ullamcorper dictum leo sed interdum. Morbi mollis pretium interdum. Suspendisse euismod non sem quis sagittis. Mauris ac lorem velit.</p> <p>Quisque iaculis fringilla nunc, in convallis lacus mattis eu. Nunc vestibulum venenatis lectus, a fermentum lorem suscipit quis. Nulla ut malesuada ante, porta sagittis dui. Etiam auctor, nisi ac ultricies eleifend, sapien tortor commodo diam, sed tempus lectus ipsum vel velit. Curabitur sed lectus massa. Phasellus accumsan libero non laoreet semper. Phasellus vel velit facilisis justo vestibulum ullamcorper quis ut tellus. Nunc consectetur diam felis, ac placerat metus ullamcorper a. Donec sollicitudin eros eget nunc scelerisque, vitae auctor leo tincidunt. In hac habitasse platea dictumst. Suspendisse luctus imperdiet neque sit amet adipiscing. Donec quis dignissim neque. Morbi in est nec lectus congue bibendum a luctus turpis. Morbi vel risus lorem. Morbi imperdiet nec urna id faucibus. Nullam pulvinar, risus id pellentesque luctus, purus enim bibendum lacus, eget placerat justo nisl ut odio.</p> </div> <aside> <div class="normal"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit viverra turpis non tincidunt. Quisque dictum sapien vitae nulla consequat scelerisque. Maecenas ac vestibulum tortor. Nunc mattis turpis a elit viverra cursus. Duis a purus dolor. Integer vel elementum augue. Integer et egestas leo, ut vestibulum quam. Suspendisse nec pulvinar lorem. Donec sed eleifend elit. Pellentesque ut congue dui, quis malesuada elit.</p> </div> <div class="large"> <p>Quisque iaculis fringilla nunc, in convallis lacus mattis eu. Nunc vestibulum venenatis lectus, a fermentum lorem suscipit quis. Nulla ut malesuada ante, porta sagittis dui. Etiam auctor, nisi ac ultricies eleifend, sapien tortor commodo diam, sed tempus lectus ipsum vel velit. Curabitur sed lectus massa. Phasellus accumsan libero non laoreet semper. Phasellus vel velit facilisis justo vestibulum ullamcorper quis ut tellus. Nunc consectetur diam felis, ac placerat metus ullamcorper a. Donec sollicitudin eros eget nunc scelerisque, vitae auctor leo tincidunt. In hac habitasse platea dictumst. Suspendisse luctus imperdiet neque sit amet adipiscing. Donec quis dignissim neque. Morbi in est nec lectus congue bibendum a luctus turpis. Morbi vel risus lorem. Morbi imperdiet nec urna id faucibus. Nullam pulvinar, risus id pellentesque luctus, purus enim bibendum lacus, eget placerat justo nisl ut odio.</p> </div> </aside> </article> </section> <body> </html> Not sure if i'm approaching this right or whether Friday afternoon brain is stopping me from seeing the obvious but any ideas/help would be great
March 14, 201412 yr Floated elements take on a computed value of display: block, so your inline-block on .contents is redundant and it's probably not acting as you expect.http://www.w3.org/TR/CSS2/visuren.html#dis-pos-floSo as a float is set to display block it will always take on the max-width value because its default is 100%.Also see http://stackoverflow.com/questions/5331882/inline-block-min-max-width-behavior.Inline-block elements are a little strange, they always produce a small gap (around 5px) on the right of the element. This is caused by the line-break in your html, it's not a margin and the only way to get rid is to inline your code, eg <div class="contents"> .... .... </div><aside> ... ... </aside> you need to account for this small gap when positioning.Personally I'd just stick with floats and use percentages for values. Not sure that helps.
March 15, 201412 yr Wynn has explained it pretty well, I if I wanted a floated inline block - maybe you have a background on it that you want to collapse to fit the content contained then you just create a parent, float it then give that element a child that can be given display inline-block.
March 17, 201412 yr Author Thanks for the tips and pointers both of you! You've given me a good place to start from I wasnt aware of the gap made by inline-blocks so glad you saved me a headache there before i got to that point!
Create an account or sign in to comment