I need to give vertical height for the right element with full background. I tried by setting
height:100%;
max-height: 100%
but the element takes only content height
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
Try giving the .clearfix class a display:flex and height:100%
.clearfix {
display: flex;
height: 100%;
}
Example below
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
.clearfix {
display: flex;
height: 100%;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
See this:
I have added display: flex for .full_container
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.full_container {
height: 350px;
border: 1px solid #ddd;
display: flex;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
Related
I have a div that has a fixed height of 20cm. Now, the inner page needs to have padding and position absolute needs to respect that padding.
How can I make the red box fill always what's left? The position absolute item needs to be always at the bottom no matter what.
It needs to have one class, and not 10classes with 10different heights like 58%, 45% etc...
If you check the codepen: https://codepen.io/Aurelian/pen/MqxvgW
Here's the HTML:
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
Here's the CSS:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
position: relative;
padding: 50px;
height: 100%;
border: 1px solid red;
}
.image {
}
Give the .page{overflow:hidden} and remove the position relative from the .page-inner-default so the .pos-bot will be positioned to the closest relative and in this case it is the .page div
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
overflow: hidden;
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
padding: 50px;
min-height: 100%;
border: 1px solid red;
}
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
.table {
display: table;
width: 10rem;
background-color: yellow;
}
.table-row {
display: table-row;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
height: 100%;
width: 50%;
position: relative;
}
.cell-top-div {
height: 1.5rem;
border-left: 1rem solid red;
}
.cell-bottom-div {
position: absolute;
top: 1.5rem;
bottom: 0;
width: 100%;
border-left: 1rem solid black;
}
.cell-right-div {
background-color: green;
height: 5rem;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="cell-top-div"> </div>
<div class="cell-bottom-div"> </div>
</div>
<div class="table-cell">
<div class="cell-right-div"> </div>
</div>
</div>
</div>
Chrome & Firefox:
Internet Explorer:
Height of cell-top-div is fixed whereas height of cell-bottom-div is variable and depends on right cell. I want to add a left border to cell-bottom-div but in IE browser height is calculated as 0.
Simplest solution I've found is to remove position:relative from .table-cell and add it to .table. I think by doing this the table is determining the height vs. the table-cell which is only being given height by its contents.
.table {
display: table;
width: 10rem;
background-color: yellow;
position: relative;
}
.table-row {
display: table-row;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
height: 100%;
width: 50%;
}
.cell-top-div {
height: 1.5rem;
border-left: 1rem solid red;
}
.cell-bottom-div {
position: absolute;
top: 1.5rem;
bottom: 0;
width: 100%;
border-left: 1rem solid black;
}
.cell-right-div {
background-color: green;
height: 5rem;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="cell-top-div"> </div>
<div class="cell-bottom-div"> </div>
</div>
<div class="table-cell">
<div class="cell-right-div"> </div>
</div>
</div>
</div>
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE
How to stretch parent div to fit children div?
I tried to add element with clear: both; after content but it didn't work for me.
HTML:
<div id="wrapper">
<div class="left-menu">
</div>
<div class="right-bar">
<div class="right-content">
<div class="content">
<div class="content-wrapper">
<div class="content-body">
Here is content
</div
</div>
</div>
</div>
</div>
</div>
CSS:
.left-menu {
background-color: #0B0C0E;
width: 20%;
height: 100%;
float: left;
}
.right-bar {
background-color: #F0F0F0;
height: 100%;
width: 100%;
}
.right-content {
float: left;
width: 80%;
}
.right-content > .content {
padding: 21px 0 0 42px;
}
.right-content > .content > .content-wrapper {
width: 98%;
height: 70%;
}
.right-content > .content .content-body {
background-color: #FAFAFA;
padding: 20px;
font-size: 24px;
border: 1px solid #D0D0D0;
}
sandbox for test: http://roonce.com/en/room/SwZuEJYB
Thanks in advance.
Use "clear-fix" technique. http://css-tricks.com/snippets/css/clear-fix/
This will allow the parent div to be the appropriate size of the floated elements within. Note this works specifically on #wrapper. (http://jsbin.com/huqehuta/1/edit)
.clear-fix:after {
content: "";
display: table;
clear: both;
}