CSS: How to adjust two divs align at bottom which use float property and auto width and height
Question
I'm working with 5 divs:
- Main Div (works as wrapper, width and height set to
auto) - sub div (contains two divs, red and blue,
width:75%andheight:auto)- red div (
height:90%width:auto) - green div (
height:10%width:auto)
- red div (
- blue div (
width:25%height:auto)
as shown below:
with current width and height settings divs are proportionally responsive to each other.
but problem is if I set height:89% bottom-margin:1% of red div, then they do not produce the same output, sub div which contains red and green, get more height if veiwport is small and it becomes shorter than blue div if viewport is large screen.
I want to adjust it in such a manner that green div remains adjusted accordingly with blue div at bottom all the time, no matters what device i'm using.
Now unfortunately my code doesn't seem to work with fiddle and neither does snippet work, but it works on my browser and so does on liveweave.com .
here is working example on liveweave.com
here is my complete code:
HTML:
<body>
<div class="main">
<div class="sub">
<div class="red"></div>
<div class="green"></div>
</div>
<div class="blue"></div>
</div>
</body>
CSS:
.main{
width: auto;
height: auto;
}
.sub{
width: 75%;
height: auto;
float: left;
}
.red{
width: 100%;
height: 85%;
background-color: red;
}
.green{
width: 100%;
height: 15%;
background-color: green;
}
.blue{
width: 25%;
height: 100%;
background-color: blue;
float: right;
}
1 answers
solution1
2 ACCPTED 2017-03-05 13:32:02
You can use Flexbox to create this layout. Flexbox will make flex-items same height by default so if you increase height of blue div, it will increase height of sub div also.
body { margin: 0; } .main { min-height: 100vh; display: flex; } .blue { background: blue; flex: 1; } .sub { flex: 3; display: flex; flex-direction: column; } .red { flex: 1; background: red; } .green { background: green; flex: 0 0 10%; }
<div class="main"> <div class="sub"> <div class="red"></div> <div class="green"></div> </div> <div class="blue"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.