DIV height problem

HTML & CSS
1

Hello,

I’m having an issue with DIV height in which when I float several DIVs left, if any of them is too large, the alignment gets messed up. Please see here. One solution could be to set a fixed height that is larger. Is this the best solution? Is there a better way to handle this problem?

1015×567 145 KB

Thank you.

2

Yes - a common problem with floats. I think that inline-block will do what you want. Check out the part of Give Floats the Flick in CSS Layouts titled Display: inline-block; for explanation and code.

Cordially, David

3

Yes, inline-block works much better in this case … although display: flex is even better these days.

In terms of inline-block, there are some gotchas, so something like this is worth considering:

.sectionMain {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

.specs-box {
    float: none;
    display: inline-block;
    vertical-align: top;
    word-spacing:0; /* reset from parent*/
}

Flexbox is pretty well supported these days, though, so if you want to be brave, get rid of the float and try something like this instead of the code above:

.sectionMain {
    display: flex;
    flex-wrap: wrap;
}
4

Hi,

Yes as mentioned above its a common problem with floats and when they wrap they will snag on anything in the way. You either have to have a fixed height for the floats or clear each row before you start again (not possible in a fluid layout of course).

Inline-block will do what you want without snagging. Here is an old codepen showing floats and then inline-blocks.

The only drawback with inline-block is that you get white space around the items (like the space between words) but usually this is not a problem. (There are fixes for the whitespace problem if needed.)

(I see Ralph has now shown the fix I mentioned :smile: )

1 Like
5

Yes, stolen from you! :stuck_out_tongue:

1 Like
6

Thanks all. This is helpful, if not a bit over my head. My understanding of CSS layouts is pretty basic at the moment. I’ll get to work and maybe check back.

7

We’re happy to help you get it working if you need help. Actually, whichever method you choose, it’s a very simple tweak of your CSS to get things working nicely.

8

Thanks. Starting to make some changes.

Question: I used box-sizing: border-box, made each item’s width 20%, and also encapsulated all item within a DIV that has no padding. Why isn’t there room for 5 across?

9

Ah, nevermind. I think it’s my margins around the boxes. But where is that margin coming from?

10

Because, as mentioned above, inline-block adds little spaces between each element (like the spaces between words). A fix for this was offered above:

.sectionMain {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

.specs-box {
    display: inline-block;
    vertical-align: top;
    word-spacing:0; /* reset from parent*/
}
11

Thanks, and sorry I overlooked that. I implemented the fix but I’m still not getting 5 across. If I do 19.9%, it works. Thoughts?

12

What you’ve done now works pretty well. calc has slightly better support than display: flex, but I’m at the point where I’m using flexbox now and to hell with older browsers, as it’s the way of the future. Of course, not everyone can afford to blow off older browsers.

13

Thanks. I resolved the bug with a workaround but am still not quite sure why it happened.

The responsive CSS works really well. Thanks, everyone!

Next step: Turn each item into a button.

14

Or a link. You can wrap <a> elements around the contents:

<li id="flex">
    <a href="https://google.com">
        <img src="/images/specs-flex.jpg">
        <div class="specs">
            <h2>Fitbit Flex</h2>
            Activity and sleep<br>
            <span class="price">$99.95</span>
        </div>
    </a>
</li>

You don’t have to, but I’d probably set that a to display: block:

#trackers li > a {display: block;}
15

I actually don’t mean a link. I’d like the user to be able to select multiple wearables and then click a “compare” button. The wearables would append a string to the subsequent URL in order to generate a table.

I can create another thread for this if necessary.

16

I think that would be best, yes. It’s more of a programming issue.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.