I’m trying to create the following and I am struggling.
It is a two column responsive div layout, both divs need to stay the same height and also the inner divs should also remain the same height of the outer divs.
Quite easy with flex-box. Though there are other solutions compatible with older browsers, like inline-blocks or display table.
Another possibility, without using flexbox, is to build a simple grid system using CSS3 as explained here.
Did you post the wrong link there? That seems to be the link to @SamA74’s codepen in the post above.
2 Likes
fixed!! Thanx
2 Likes
Hi there Exphor,
if you require just a wee smidgen more functionality, try this…
[code]
untitled document body { font:100%/150% sans-serif; background-color:#f0f0f0; } #container { display:flex; flex-flow:wrap; justify-content:space-between; padding:1%; width:80%; margin:auto; border:1px solid #999; border-radius:1em; box-sizing:border-box; background-color:#fff; box-shadow:0.5em 0.5em 0.5em rgba(0,0,0,0.3); } .width1 { width:39.5%; padding:2%; border:1px solid #999; border-radius:0.8em; box-sizing:border-box; background-color:#eef; box-shadow:inset 0 0 1em rgba(0,0,0,0.3); color:#444; } .width2 { width:59.5%; padding:2%; border:1px solid #999; border-radius:0.8em; box-sizing:border-box; background-color:#efefff; box-shadow:inset 0 0 1em rgba(0,0,0,0.3); color:#444; } .margin { margin-bottom:10px; } @media screen and (max-width:480px) { #container { display:block; width:96%; padding:0 0.25em 0.25em; } .margin { margin:0; } .width1,.width2 { width:100%; } .width1 { margin:0.25em 0; } }Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat.
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra purus vitae lobortis.
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. Phasellus ac sem consequat lorem congue malesuada vitae vitae diam.
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. Phasellus ac sem consequat lorem congue malesuada vitae vitae diam.
coothead
The flex solution works well on desktops but on tablets the inner div is still not being forced to the parent height.
May I ask what you are talking about, please? There are no inner boxes within SamA74’s flexboxes. How does his code misbehave on smaller devices? or are you referring to someone else’s code? or are you trying to use it on a page that you are composing and it’s not working there?
Except for the lack of an inner div, it works just fine on my PC at all widths.
Coothead’s code is smart enough to break into vertical boxes at smartphone widths.
If you want a box with a border in SamA74’s code, you can try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box-within-flexbox</title>
<!--
https://www.sitepoint.com/community/t/responsive-auto-height-divs/215775
Exphor
based on code by SamA74
http://codepen.io/SamA74/pen/wMbwee
-->
<style type="text/css">
.cont {
display: flex;
flex-flow: wrap;
}
.box {
box-sizing: border-box;
padding: 3em;
outline:1px solid lime;
position:relative; /* ADDED */
}
.col1 {
width: 40%
}
.col2 {
width: 60%
}
.div1, .div4 {
background: #d00;
}
/* ADDED */
.innerbox {
position:absolute;
top:8px;
right:8px;
bottom:8px;
left:8px;
border:2px solid #666;
border-radius 5px;
}
</style>
</head>
<body>
<div class="cont">
<div class="col1 div1 box"><div class="innerbox">1. 40%</div></div>
<div class="col2 div2 box"><div class="innerbox">2. 60%</div></div>
<div class="col1 div3 box"><div class="innerbox">3. 40%</div></div>
<div class="col2 div4 box"><div class="innerbox">4. 60%</div></div>
</div>
</body>
</html>
I added an innerbox in his HTML and in the CSS.
I’ve tried adding a div inside to contain a background image which is to be forced bottom right and the col1 div1 box also contains a background image to apply a gradient fill (css background-image).
<div class="cont">
<div class="col1 div1 box">
<div class="imgdiv img3">
<h2 class="white">System Kits</h2>
</div>
</div>
</div>
How about trying the working page that I just posted all by itself, please.
Height is always a problem in these “hypothetical” layouts, as in a responsive page, it is generally determined by content, which we do not have in this case. Only when we know the full context in which the layout will be used can a proper means of determining the height be set.
It breaks the entire layout Ronpat
I imagine it does. I thought the inner box with the border was part of the design. Silly me.
That appears to be working and responsive, where’s the issue?
Though I would probably add a query to stack the boxes and switch order on small screens.
Your layout depends on .imgdiv {height:100%;}. It’s nice that Firefox obeys that height property but there is nothing in the specs that obligates it to work in any browser. For a percentage height to work, the parent must have a known height or a height of 100% must exist up to a known height. There are a couple of exceptions, but your layout doesn’t exploit them.
{height:100%} as used in your layout does not work in Chrome (webkit) and probably not in IE either.
You need to modify your layout to something that is cross-browser compatible. Everyone’s code fills that bill including my modification of SamA74’s code (once the inner border but not the box is deleted).
2 Likes
Take another look with your coding added with no alterations.
Height is more of an issue.
Why do you even need an inner div?
The inner div is not needed. I had included it to provide the border on the original image, but that turned out to be a misunderstanding.
Discarding it solves the height issue in Chrome.