CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SpiritOfDragon
SpiritOfDragon

Reputation: 1432

Responsive Equal height div without specifying the height

I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.

If the left side div is long then the right side div should adjust to the left side div and vice versa.

Also the right side div has 2 small divs which should also be of same height.

Can this be achieved using only CSS? Or should I make use of JS/jQuery?

Example here on the jsFiddle

img {
	width: 100%;
	border: 1px solid green;
}

.row {
	display: table;
}

.column {
	display: table-cell;
	vertical-align: top;
}

.w100 {
	width: 100%;
}

.w75 {
	width: 75%;
}

.w50 {
	width: 50%;
}

.w25 {
	width: 25%;
}
<body>
	<div class="row w100">
		<div class="column w75">
			<img src="http://placehold.it/500x500" alt="">
		</div>
		<div class="column w25">
			<div class="col-row">
				<img src="http://placehold.it/250x250" alt="">
			</div>
			<div class="col-row">
				<img src="http://placehold.it/250x250" alt="">
			</div>
		</div>
	</div>

Upvotes: 0

Views: 1166

Answers (2)

Memet Olsen
Memet Olsen

Reputation: 4608

I've made something that might possibly be something that you are looking for.

http://jsfiddle.net/2vLpx9k3/4/

It adjusts the widht and height of the inner elements based on the outer element.

HTML:

<div class="outer">
    <div class="left">
        <div class="right"></div>
        <div class="right bottom"></div>
    </div>
</div>

CSS:

.outer {
    height: 100vh;
}

.left {
    background-color: red;
    width: 100%;
    height: 100%;
    margin-right: 50%;
}

.right {
    background-color: green;
    height: 50%;
    margin-left: 50%;
}

.right.bottom {
    background-color: black;
}

Upvotes: 0

pawel
pawel

Reputation: 36975

You could use flex-box, for example:

.row {
    display: flex;
    flex-direction:row;
}

.column {
    display: flex;
    flex-direction:column;
}

And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/

You may need some prefixes for cross-browser support.

Upvotes: 1

Related Questions