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

Question

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>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Sep 05 '16 at 13:07
It would be nice if your "A B C D E" examples looked different from each other. As it currently stands, they're not helpful at all. — J. Allan, Sep 05 '16 at 13:12
@Paulie_D Apologies - for some reason my formatting of the letters didn't stick! I'll upload some pictures of what I meant instead! — Marissa, Sep 05 '16 at 13:14
Ok. Tried to edit a fix of the examples, but someone else is working on it... — J. Allan, Sep 05 '16 at 13:14
@JefreN yes I know, I've only just seen that it's somehow not kept my format - bare with me a moment and I will upload images — Marissa, Sep 05 '16 at 13:14
@JefreN Thanks - I had no idea about the line breaks - I didn't read the formatting guidlines as I've not been posting here very long, is that why I have a downvote? — Marissa, Sep 05 '16 at 13:19
I don't think so ... people downvote for a myriad of reasons. :( — J. Allan, Sep 05 '16 at 13:19
Do you **only** want three divs to *ever* be on the top line? On big screens, is it ok if all the divs are on the first line? — J. Allan, Sep 05 '16 at 13:21
@JefreN Yes it can only be the three divs. My page is fixed at 1000px wide on desktop and to make my content readable it needs to be a 1/3 of the width so yes - there's very little room to move on the layout and widths. I just would really rather not have to specify height as that will bring up a whole host of other problems. — Marissa, Sep 05 '16 at 13:26
Ok. I'll try to get you something in the next little while. I have an errand to run, so I can't help you yet. (In fact, by the time I can help you out, someone else might have already done so, so don't fret. :)) — J. Allan, Sep 05 '16 at 13:27
No problem, thanks for your help so far! - I thought this was a really easy fix and I'm just missing something simple perhaps not — Marissa, Sep 05 '16 at 13:29
Wait ... I just thought of something: "Is it acceptable for my solution (when I get you one) to use external `CSS` to simplify the solution?". — J. Allan, Sep 05 '16 at 13:31
I'm afraid not no. I can do an internal stylesheet if I have to - though it's not guaranteed to be supported but I can't do external as I have no access to the stylesheets. Otherwise I'd attempt media queries etc. It's a topic in asp.net storefont if that gives you any idea - and I have limited access to anything else in the website. I thought it might be something to do with my float or display properties. — Marissa, Sep 05 '16 at 13:38

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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:

The plunker is the easiest thing to understand. The code snippet will hopefully be "copy and paste."
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.
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.

If users could award badges to other users, I'd give you the Esotericist for using a playground site I've never heard! :) — henry, Sep 05 '16 at 18:39
@henry: Why thank you! I never heard of it either until a couple of weeks ago. (I like it significantly better than JSFiddle because it allows you to separate your source into different files **and** you can download your project very easily.) :) — J. Allan, Sep 05 '16 at 18:42
Wow! Thank you so much for spending the time to go into such a detailed answer. Just giving some code that worked would be okay but you've gone so above and beyond and given me such a detailed explanation! Thank you very very much! — Marissa, Sep 06 '16 at 08:17

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

1 Answers1