CODEWITHSUNDEEP
csshtmlsizeborder
Mihai Bujanca
Mihai Bujanca

Reputation: 4219

Make divs borders of the same size without using explicit heights

This fiddle: http://jsfiddle.net/e3Ggh/ shows what my problem would be: I need to have the borders of my divs at the same size, even though their content is different. However I need to do this without using explicit sizes (neither the divs or their parents should have explicit sizes).
HTML:

<div id="texte">
            <div>
                <p>"Lorem ipsum dolor sit amet [...]"</p>
            </div>
            <div>
                <p>At vero eos et accusamus[...]</p>
        </div>
    </div>

CSS:

        #texte{
            width:100%;
        }
        #texte>div{
            width:30%;
            display:inline-block;
            border: 1px solid black;
            vertical-align: top;
        }
        #texte>div>p{
            width:90%;
            margin: auto;
            display: block;
        }

Upvotes: 0

Views: 750

Answers (3)

fred02138
fred02138

Reputation: 3361

Here is a solution using display:flex (JSFiddle here: http://jsfiddle.net/H3S4k/

CSS

#texte {
    width:100%;
    display: flex;
}
#texte>div {
    flex: 1;
    border: 1px solid black;
    vertical-align: top;
}
#texte>div>p {
    width:90%;
    margin: auto;
    display: block;
}

See also: http://caniuse.com/#search=flex

Upvotes: 0

bjuice
bjuice

Reputation: 291

You can achieve what you want using display: table on your main container and display: table-cell on your columns:

#texte{
        width:100%;
        display: table;
    }
    #texte>div{
        width:30%;
        display:table-cell;
        border: 1px solid black;
        vertical-align: top;
    }
    #texte>div>p{
        width:90%;
        margin: auto;
        display: block;
    }

jsFiddle: http://jsfiddle.net/bjuice/GQmfk/1

Compatibility: http://caniuse.com/css-table

Upvotes: 4

Huangism
Huangism

Reputation: 16438

Make them into table cells like so

http://jsfiddle.net/e3Ggh/3/

#texte {
    display: table;
    width: 100%;
    border-spacing:10px;
}

#texte>div{
   width:30%;
   display:table-cell;
   border: 1px solid black;
   vertical-align: top;
}

This will give you an idea on how it works, you can style it further as needed

Upvotes: 2

Related Questions