Display: inline-block, table CSS div height issue

HTML & CSS
1

Hi, This is a little bit of a complex layout (at least for me) so I hope you can bear with me.
https://www.ablueman.co.uk/layout.php

Hopefully you will notice that when you get to about: “Browser (Width: 1361px)” (see bottom if you need width).

The sections start spreading out. However I would like the sections to stay the same height within their parent for obvious reasons.

display: table / display: tablecell I hear you cry…

But then that ruins the flow where the sections drop in to each other like a hamburger. They merge in horizontally.

Is there another CSS solution or will I have to turn to javascript and detect the height of each div compare them and then assign height.

bodge fiddle: http://jsfiddle.net/ablueman/aLp08gsz/2/

2

Never mind, I did it with Javascript. Just easier that way I guess.

3

Sure, until I turn off Javascript.

That’s an awfully wide site to be doing - small resolution screens are going to suffer.

As far as equal column heights, there are ways of getting equal heights in CSS if you want. Unless you don’t want to change.

4

Hi, Andy_Blueman. I may be misunderstanding the complexity of your question, so forgive me if this example is too simplistic.

It’s not difficult to change table-cells to blocks with a media query and thereby change the layout from horizontal to vertical. No JS required. The following example is a working page that can be copied to a file and opened in your favorite browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>table-cell to block</title>
<!--
http://www.sitepoint.com/community/t/display-inline-block-table-css-div-height-issue/98143
Sep 17, 2:48 PM
Andy_Blueman
-->
    <style type="text/css">

.outer {
    max-width:1040px;
    margin:0 auto;
}
.table {
    display:table;
    table-layout:fixed;
    width:100%;
    border-spacing:0;
    border:1px solid #f00;
}
.tcell {
    display:table-cell;
    border:1px dotted #00f;
    padding:10px;  /* as desired */
}

@media screen and (max-width:600px) {
    .tcell {display:block;}
}

    </style>
</head>
<body>

<div class="outer">
    <div class="table">
        <div class="tcell">Item One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, enim non gravida sagittis, libero nulla congue nibh, ac rutrum est nisl ac justo. Ut ligula elit, rhoncus in libero quis, posuere elementum mauris. Ut bibendum orci quis tellus efficitur luctus. Nunc ultrices congue libero, et tincidunt erat placerat ut. Proin vitae velit scelerisque, laoreet ipsum ut, eleifend nunc. Cras aliquet aliquam dignissim. Mauris accumsan, lacus vel tincidunt convallis, dolor lacus varius nibh, eu ornare quam augue dignissim eros. Nunc malesuada magna in est viverra, id malesuada erat imperdiet. Curabitur vulputate nunc eget condimentum scelerisque. Maecenas id nibh accumsan, viverra lorem a, accumsan turpis. Donec condimentum sit amet lacus luctus bibendum.</div>
        <div class="tcell">Item Two. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, enim non gravida sagittis, libero nulla congue nibh, ac rutrum est nisl ac justo.</div>
        <div class="tcell">Item Three. Fusce ultrices nulla dignissim turpis rutrum sollicitudin. In facilisis elit at lorem hendrerit, non tempus turpis facilisis. Nullam gravida magna turpis, et semper nunc hendrerit vel. Nam eget leo at libero tristique tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque porttitor commodo elit, sed condimentum leo lobortis et. Maecenas sed mi augue. Cras convallis porta lacus eu faucibus. Maecenas porttitor dignissim libero, bibendum hendrerit odio gravida ut.</div>
    </div>
</div>

</body>
</html>
1 Like
5

@RyanReese It shrinks down to nothing? looks fine on my S4, what are you referring to?
I appreciate the turning off java, but actually this is just a site for me to test things on so the java dependency doesn’t matter, although I would like to know how to do something similar without relying on java.

With regards to the equal height, that’s why I posted this question, each css solution I have tried has failed to have the desired affect.

6

@ronpat Damnit, I must have gone snow blind again that’s an obvious solution. Thank you. Not sure why I didn’t think of it.

7

No need to put yourself down. If you have never done or seen something before, even simple constructs like this aren’t necessarily obvious. This happens to be a very useful technique to have in one’s “toolbox”, so I’ll bet it’s a permanent part of your inventory now .

Thanks very much for the feedback.