CODEWITHSUNDEEP
csslayout
Marconius
Marconius

Reputation: 713

CSS - Two divs side by side, have one define max height

I'm trying to create a layout with CSS and ran into the the following issue.

I have two divs, displayed side by side (one is floated left), wrapped in a third div. This works fine.

What I want to be able to do is have one div have free height (adjusted to content) and I want the other div to never be larger than this. So for example, if the first div is 3 lines of text and the second is 4 lines, the second should go into overflow. But I don't want to give a fixed value to the height of the first div or the wrapper.

How would I go about having CSS do this?

EDIT: I've created a Fiddle of what I have so far, if that helps anyone. I decided to not use float here and instead went for an absolute position + margin so the area under the left div would stay cleared.

So what I want here is for blue to be the same height as red (with overflow turning on if I enable it), but without having to set the height of anything to a fixed number.

HTML:

<div class="wrapper group">
    <div class="left">Lorem ipsum dolor sit amet, vide porro ubique vis ei.</div>
    <div class="right">Probo fabulas inermis cu cum. Eros voluptatibus vel te, ea sea velit quaestio consectetuer, modus facete no qui. Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E</div>
</div>

CSS:

.left {
    display: block;
    background-color: red;
    width: 10em;
    position: absolute;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}

EDIT: I created a version with float too.

.left {
    float: left;
    display: block;
    background-color: red;
    width: 10em;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}
.group:after {
    display: table;
    clear: both;
    content:"";
}

Upvotes: 2

Views: 1913

Answers (2)

matija kancijan
matija kancijan

Reputation: 1205

Can this help?

Fiddle

HTML:

<div class="wrapper">
    <div class="left">
        Lorem ipsum dolor sit amet, vide porro ubique vis ei.
    </div>
    <div class="right">
        Probo fabulas inermis cu cum. Eros voluptatibus vel te, 
        ea sea velit     quaestio consectetuer, modus facete no qui. 
        Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. 
        Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E
    </div>
</div>

CSS:

.wrapper {
    display:table;
    border:1px solid #AFAFAF;
    padding: 3px;
    width:300px;
}
.left {
    display: table-cell;
    border-right: 1px solid #EFEFEF;
    width:30%;
    padding: 3px;
}
.right {
    display: table-cell;
    width:70%;
    padding: 3px;
}

Upvotes: 1

Fabi
Fabi

Reputation: 274

So you want your second div always to be at the same height as your first div, even if it's content is larger?

As far as I know it's not possible to declare the height of a div to be smaller than it's content orientated to another div without working with fixed heights.

Here I found an example of same height divs, but it is always geared to the larger div... but however, perhaps it helps you: How do I keep two divs that are side by side the same height?

Upvotes: 0

Related Questions