CODEWITHSUNDEEP
htmlcss
Brainarts
Brainarts

Reputation: 91

Why does div from left and right does not fill full available height like the center div

enter image description here

I would like to know why all the 2 div holding the label (Left) and the buttons (right) are not the same height as the one holding the input [type=text]. I tried to put height=100% in the style but it does not work surely because there is no height on the parent... but if this is the cause... why the one in the center fill that space anyway????

Here is my code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style>
    body {
        margin: 5px;
        background-color: lightcyan;
    }

     .interactput {
         background-color: green;
     }

    .interactput div {
        display: inline-block;
        background-color: lightpink;
    }
</style>
</head>
<body>
    <div id="AddessEditor" class="interactput">
        <div>
            <label>Entrez votre adresse de depart</label>
        </div>
        <div>
            <p><input type="text" value="Editor"/></p>
        </div>
        <div>
            <button>ok</button>
            <button>cancel</button>
            <button>other</button>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 71

Answers (1)

aleation
aleation

Reputation: 4834

look on the differences... what differs the center div from the other 2? the <p>, paragraphs normally have by default padding/margin and or different line-height I think

it's actually the <p> filling the container, not the div, if you wrap the other buttons and labels withing a <p> they will look the same.

Upvotes: 2

Related Questions