Why is my DIV height wrong?

Question

0.00/5 (No votes)

See more:

Hi everyone,

I have created a css table layout with display:table and so on, but when it shows up in browser the height of the cells/row seems not correct.

Have a look here:
http://jsfiddle.net/ev092xoq/[^]

For my understanding the height of the red and green area should be the same as the white one...

Can anyone explain why thats not the case??

Please be aware that I don't try to make a 3 column design but the white area should remain inside the red area.

Greetings

Posted 15-Jan-15 22:05pm

exoc

Updated 15-Jan-15 22:08pm

v2

Add a Solution

2 solutions

Solution 1

Fiddle Update[^]

First of all I would like you to remove all the inline styles and add class use css instead. That makes code more readable and easy to maintain.

I have updated the fiddle by you. Please check.
Post back queries if any.
Thanks.

Posted 15-Jan-15 22:26pm

Suraj Sahoo | Coding Passion

Comments

exoc 16-Jan-15 5:04am

First of all you're right (regarding your tip about css).

Sadly, your solution does not work on IE.

And, I don't get it... what is the table-caption tag for?

Is there a solution that remains the table-cell tag?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Accepted Answer · 2015-01-16T00:26:00

Weird stuff is going on in the css somewhere on the browser parsing.
I can not explain why it is doing what it is doing, maybe someone else has a clue on that one.

But here is an alternative method to get your desired effect using display:inline-block;

HTML

<div class="init" style="width: 100%; height: 8em; overflow: hidden; background-color: gray;">
    <h3>Using inline-block:</h3>
    <div style="display:inline-block;">
        <div style="display:block;height: 2em;">
            <div style="display:inline-block;width: 4em; overflow: hidden; background-color: green;">
                <div style="height: 2em; overflow: hidden; max-height: 2em;">
                    <span>links </span>
                </div>
            </div><div style="display:inline-block;width: 8em; overflow: hidden; background-color: red;">
                <div style="height: 2em; overflow: hidden; max-height: 2em;">
                    <div style="width: 2em; height: 2em; background-color: white;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is link to your fiddle updated: http://jsfiddle.net/ev092xoq/4/[^]
In your version: borders added to all divs and an additional table equivalent.
It can be seen the div-td-cells are taking more height than they should do (if compared the table equivalent).

--Solution revisited--
Add some text or   to the White div and it works:

HTML

<div style="width: 2em; height: 2em; background-color: white;">text or something needs to be added here</div>

Updated fiddle: http://jsfiddle.net/ev092xoq/6/[^]