Marissa Marissa - 3 months ago 11
CSS Question

How to get multiple divs to display in even rows without specifying height?

Apologies if this has been asked before but I can't find an answer that specifies this exactly.

Without using media queries or javascript/jquery, I need to get my 5 divs to display like this:

A B C

D E

and on a smaller screen to go to

A B

C D

E

However I am getting this instead:

A B C

... D

E

If I add 'clear:float;' to the 4th div, on a smaller screen it goes to this:

A B

C

D E

Which I don't want.

I don't want to specify the height of each div as content may be added over time.

Can anyone point out where I've gone wrong in my code, thanks in advance!

P.S. All of my CSS is inline as that's all our system can guarantee working - sorry!



<center>
<div style="width:100%; max-width:1000px;">

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">A</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>

</div>

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">B</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>

</div>

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">C</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">D</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>

<div style="max-width:333px; width:100%; display:inline-block; float:left; text-align:left; padding-bottom:10px; color:rgb(71,70,70); font-family:arial, verdana, sans-serif;">
<span style="font-size:18px; font-weight:bold;">E</span>
<ul style="font-size:13px; list-style-type:none; padding-left:10px;">
<li>XX</li>
<li>XX</li>
</ul>
</div>




</div>
</center>




Answer

Intro:

In the comments, you stated that you thought this would be an easy fix -- you're right.


All we have to do:

  • Set a max-width on the wrapper div.
    (If the text divs were immediate children of <body>, you could set max-width on <body> if you so desired.)
    (This is only needed when you specifically require the wrapper div to never be larger than a certain value. If you were fine with the wrapper taking up all the space it could, you wouldn't need to set max-width. Divs automatically take up 100% of the available width in their parent container.)

  • Set a max-width on each text div.
    We could set width on the text divs, but then they would be too big on really small screens. (In most cases, it's best to have a website that doesn't require horizontal scrolling to see content.) As it currently stands, the text divs are almost guaranteed to be 300px unless the screen is too small for them to be that big. width would remove that flexibility.

  • Set display: inline-block; on each text div.
    If we used display: block; (the default for divs), each text div would be on its own line. If we used display: inline;, then we can't set the dimensions for the text divs.

  • (Optionally: set vertical-align on each text div so that they line up vertically with each other in the manner you want.


Things you don't have to do:

  • Why use width on elements on which you already set max-width.
    You may be trying to use width in the same way as min-width. If so, why not just use min-width? (Don't forget the potential disadvantages to using min-width and width. They were outlined above, as you may recall.)

  • Don't use <center>! It's not supported in HTML5!
    Instead, set margin-left: auto; margin-right: auto; (or margin: 0 auto;) on block elements that you want to center. Set text-align: center; on the parent of inline and inline-block elements that you want to center.

  • You don't need to use float to accomplish this.


Check This Out:

Here's a Plunker.

AND here's a code snippet:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body style="font-family: arial, verdana, sans-serif; text-align: left;">
    <div style="margin: 0 auto; max-width: 1000px; color: rgb(71,70,70);">

        <div style="display: inline-block;
    max-width: 300px;
    padding-bottom: 10px;
    vertical-align: top;">
        <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">A</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium orci a lorem semper, vel maximus elit tincidunt. Duis placerat sem vel cursus efficitur. Praesent condimentum facilisis mi, eu elementum nibh venenatis quis. Sed orci neque, viverra sit amet laoreet at, finibus nec velit. Vestibulum eu urna quis ex elementum lacinia non accumsan risus. Suspendisse potenti. Vestibulum non congue mi. Sed viverra orci ac magna mattis suscipit. Vestibulum hendrerit nisl quis ipsum placerat vulputate.
        </div>

        <div style="display: inline-block;
    max-width: 300px;
    padding-bottom: 10px;
    vertical-align: top;">
        <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">B</span>
        Curabitur vel dolor a nibh condimentum vestibulum. Nullam fermentum pulvinar est id vestibulum. Morbi libero nunc, congue sit amet turpis ac, sodales mattis orci. Vestibulum lectus metus, aliquam a diam ut, cursus ultrices sem. In dictum velit sed lorem facilisis, sit amet finibus lectus ornare. Praesent aliquam sed est hendrerit rutrum. Aliquam consequat arcu sed metus scelerisque, id porta leo rutrum. Aenean faucibus id velit at porttitor.
        </div>

        <div style="display: inline-block;
    max-width: 300px;
    padding-bottom: 10px;
    vertical-align: top;">
        <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">C</span>
        Donec a tellus lectus. Aliquam erat volutpat. Quisque finibus porta urna. Suspendisse faucibus nulla sit amet convallis cursus. Aliquam placerat justo eget imperdiet varius. Etiam blandit risus eget eros scelerisque, quis venenatis orci dapibus. Integer scelerisque urna sed elit mattis porttitor.
        </div>

        <div style="display: inline-block;
    max-width: 300px;
    padding-bottom: 10px;
    vertical-align: top;">
        <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">D</span>
        Maecenas vestibulum mollis tincidunt. Nulla pellentesque massa eu ante luctus, et dapibus arcu vestibulum. In nec placerat tortor. Vestibulum libero dolor, scelerisque sit amet posuere feugiat, efficitur a augue. In a accumsan dolor. Nulla porta purus arcu, et cursus diam laoreet quis. Aliquam eget tincidunt mauris, eget molestie risus.
        </div>

        <div style="display: inline-block;
    max-width: 300px;
    padding-bottom: 10px;
    vertical-align: top;">
        <span style="color: orange; display: block; font-size: 18px; font-weight: bold;">E</span>
        In ac imperdiet neque. Morbi vulputate, leo eu interdum posuere, metus lorem tristique est, vel semper magna eros a magna. Maecenas id nulla ut massa bibendum ornare ac eget sapien. Praesent in venenatis mi. Vestibulum et iaculis erat. Integer sed magna ac ligula venenatis feugiat. Curabitur purus turpis, iaculis eget feugiat a, mattis quis mi.
        </div>
    </div>
</body>

</html>


Other:

  1. The plunker is the easiest thing to understand. The code snippet will hopefully be "copy and paste."

  2. I highly recommend that you read the comment in the plunker's css so that you understand why max-width is so small on the text divs. You should probably read this article if you want to know other ways to solve the problem.

  3. You might also want to put text-align: center; on the wrapper div so that the text divs are centered.


PS: Any questions ... ? Just ask.