I've been struggling to create a grid banner which contains 2 columns 8/12 and 4/12 where the 8/12 contain 1 div which fills everything and the 4/12 contains 2 on top of eachother. There should be 20 pix between the two columns andbetween the two divs in the 4/12. It should look something like below where the two columns height always is aligned?
Here you go
$(document).ready(function() {
var h;
h = $('#one').height();
alert(h);
$('#ttcont').height(h)
});
#one {
width: 66%;
background-color: black;
display: inline-block;
vertical-align: top;
}
#two {
height: 49.5%;
width: 100%;
background-color: red;
}
#three {
height: 49.5%;
margin-top: 1%;
width: 100%;
background-color: pink;
}
#ttcont {
display: inline-block;
width: 33%;
}
#cont {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cont">
<div id="one">
jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>jkhdfc
<br>
</div>
<div id="ttcont">
<div id="two">
hjgdcf
</div>
<div id="three">
hjdv
</div>
</div>
</div>
If you want the 4-12s to automatically adapt in height you need to explicitly set the surrounding container's height in css. Since I assume this depends on content, you have to use a tiny bit of Javascript to measure its rendered height and then apply that as a css style to it.
$(document).ready(function() {
var boxcontainerHeight = $('.boxcontainer').height();
$('.boxcontainer').css('height', boxcontainerHeight + 'px');
});
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.boxcontainer {
background-color: #f0f0f0;
width: 500px;
}
.boxcontainer:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
.big {
background-color: #666;
color: #fff;
float: left;
width: 66.6666666%;
height: 300px;
border: 20px solid rgba(255, 255, 255, 0.5);
}
.small {
color: #fff;
height: 50%;
border: 20px solid rgba(0, 0, 0, 1);
}
.small+.small {
border-top-width: 0;
}
.small .boxcontent {
background-color: #a00;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>Boxes</title>
</head>
<body>
<div class="boxcontainer">
<div class="big">
<div class="boxcontent">8-12</div>
</div>
<div class="small">
<div class="boxcontent">4-12</div>
</div>
<div class="small">
<div class="boxcontent">4-12</div>
</div>
</div>
</body>
</html>
#d8, #d4 div {
border: 1px solid black;
float: left;
}
#d8, #d4 {
height: 200px;
}
#d8 {
width: 60%;
margin-right: 10px;
}
#d4 div {
width: 30%;
height: calc(50% - 11px);
margin-left: 10px;
margin-top: 10px;
}
#d4 div:first-child {
margin-top: 0px;
margin-bottom: 10px;
}
body {
width: 100vw;
height: 100vh;
}
<div id="d8"></div>
<div id="d4">
<div></div>
<div></div>
</div>
A little CSS solves it.
Related
I want to render maps like this way by using display:table.
But it seems that it doesn't follow fixed height, making div bigger when I clicked a button
for showing 4 maps.
I set 50% height for map13 when clicked button #four.
Is there a way to make the map fit inside div boxes? or should I not use display:table?
function divideMap(divisionType) {
$('#map24').css('display', 'none');
$('#map3').css('display', 'none');
if (divisionType === 'four') {
$('#map13').css('height', '50%');
$('#map13').css('width', 'auto');
$('#map24').css('display', 'table-row');
$('#map3,#map4').css('display', 'table-cell');
} else if (divisionType === 'two vertical') {
$('#map3').css('display', 'table-cell');
} else if (divisionType === 'two horizontal') {
$('#map24').css('display', 'table-row');
$('#map4').css('display', 'none');
} else {
}
mainMap.updateSize();
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
}
#header {
height: 10%;
width: 100%;
background-color: silver;
float: left;
}
#main {
height: 90%;
width: 100%;
}
#contents {
height: 100%;
width: 100%;
}
#fullscreen {
height: 100%;
width: 100%;
display: table;
table-layout: fixed;
}
#map13 {
display: table-row;
}
#map1 {
display: table-cell;
border: 1px solid black;
}
#map3 {
display: none;
border: 1px solid black;
}
#map24 {
display: none;
}
#map2 {
display: table-cell;
background-color: darkslategray;
border: 1px solid black;
}
#map4 {
display: table-cell;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<button onclick="divideMap('original')">reset</button>
<button onclick="divideMap('two vertical')">two vertical</button>
<button onclick="divideMap('two horizontal')">two horizontal</button>
<button onclick="divideMap('four')">four</button>
</div>
<div id="main">
<div id="contents">
<div id="fullscreen">
<div id="map13">
<div id="map1">
</div>
<div id="map3">
</div>
</div>
<div id="map24">
<div id="map2">
</div>
<div id="map4">
</div>
</div>
</div>
</div>
</div>
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>
So I am attempting to code a fluid layout, and am experimenting with the float tag.
The first step was to develop a simple fluid layout that has two divisions that fill the whole page in width. The blue box has a width of 25%, the color #0076a3. The height is 600 pixel, the green box ha sa width of 75%, the color # 7cc576. The height is 600 pixels. Then I want to add 4 boxes inside the blue box, each has a height for 150 pixels.
Afterwards, I wanted to place those two divisions (that are formed from the left division and right division) at the center of another that has a width of 1200px.
The Problem I am facing is that only I can fit the inner box(blue boxes and green one) inside the outer box(gray one) properly.
#mainDiv {
width: 1200px;
margin: 0 auto;
background-color: #c2c2c2;
}
#leftDiv,
#rightDiv {
height: 600px;
margin: 0px;
}
#leftDiv {
width: 25%;
background-color: #0076a3;
float: left;
}
#rightDiv {
width: 75%;
background-color: #7cc576;
}
#box1,
#box2,
#box3,
#box4 {
height: 150px;
clear: both;
}
#box1 {
background-color: #6dcff6;
}
#box2 {
background-color: #00bff3;
}
#box3 {
background-color: #00aeef;
}
#box4 {
background-color: #0076a3;
}
<div id="mainDiv">
<div id="leftDiv">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
<div id="rightDiv"></div>
</div>
This final output should look like this:
Okay so I got it working but For some reason I can't seem to find where the extra whitespace is coming from on either the blue or green box but there is a little space between them - which is while you'll see I adjusted the width of the blue box to be 24.66% which allows them to be on the same line - I also took away the floats and clears - you want to use "inline-block" for this.
Here is a Fiddle for you to play with: https://jsfiddle.net/rockmandew/Lkkuzmh9/
#leftDiv {
width: 24.66%;
background-color: #0076a3;
display:inline-block;
}
#rightDiv {
width: 75%;
background-color: #7cc576;
display:inline-block;
}
Let me know if you have any questions.
The float: left should be applied to both #leftDiv and #rightDiv.
EDIT:
I modified my answer to include a div#container to position the floated elements within the grey box parent.
#mainDiv {
width: 1200px;
margin: 0 auto;
background-color: #c2c2c2;
}
#container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#leftDiv,
#rightDiv {
height: 600px;
margin: 0px;
float: left; /* float moved here */
}
#leftDiv {
width: 25%;
background-color: #0076a3;
}
#rightDiv {
width: 75%;
background-color: #7cc576;
}
#box1,
#box2,
#box3,
#box4 {
height: 150px;
clear: both;
}
#box1 {
background-color: #6dcff6;
}
#box2 {
background-color: #00bff3;
}
#box3 {
background-color: #00aeef;
}
#box4 {
background-color: #0076a3;
}
<div id="mainDiv">
<div id="container">
<div id="leftDiv">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
<div id="rightDiv"></div>
</div>
</div>
Try the following code.
#mainDiv {
height:700px;
margin: 0 auto;
}
#container{
height:90%;
background-color: #c2c2c2;
padding: 0 100px;
}
#leftDiv,
#rightDiv {
height: 500px;
margin: 0px;
float: left;
}
#leftDiv {
width: 25%;
background-color: #0076a3;
}
#rightDiv {
width: 75%;
background-color: #7cc576;
}
#box1,
#box2,
#box3,
#box4 {
height: 125px;
clear: both;
}
#box1 {
background-color: #6dcff6;
}
#box2 {
background-color: #00bff3;
}
#box3 {
background-color: #00aeef;
}
#box4 {
background-color: #0076a3;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
</head>
<body>
<div id="mainDiv">
<div id="container">
<div id="leftDiv">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
<div id="rightDiv"></div>
</div>
</div>
</body>
</html>
What if you just add padding to #mainDiv? Like this:
#mainDiv {
height: 600px;
width: 800px;
margin: 0 auto;
padding: 0 200px 200px 200px;
background-color: #c2c2c2;
}
#leftDiv,
#rightDiv {
height: 600px;
margin: 0px;
}
#leftDiv {
width: 25%;
background-color: #0076a3;
float: left;
}
#rightDiv {
width: 75%;
background-color: #7cc576;
float: left;
}
#box1,
#box2,
#box3,
#box4 {
height: 150px;
}
#box1 {
background-color: #6dcff6;
}
#box2 {
background-color: #00bff3;
}
#box3 {
background-color: #00aeef;
}
#box4 {
background-color: #0076a3;
}
<div id="mainDiv">
<div id="leftDiv">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
<div id="rightDiv"></div>
</div>
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;
}
I found this solution to centering my div vertically and horizontally. However if I fill in the content section past the length defined for the div it will run outside of it. I was hoping to make it expand depending on the content inside the div. How do I make it so this can happen?
JSFIDDLE
HTML:
<body>
<div id="wrapper">
<div id="headerwrapper">
<div id="header" class="center">header</div>
</div>
<div id="titlewrapper">
<div id="title" class="center">title</div>
</div>
<div id="contentwrapper">
<div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
<div id="footerwrapper">
<div id="locationwrapper">
<div id="location" class="center">location</div>
</div>
<div id="copyrightwrapper">
<div id="copyright" class="center">copyright</div>
</div>
</div>
</div>
</body>
CSS:
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%
max-width: 5em;
}
#wrapper {
background-color: pink;
height: 100%;
width: 100%;
}
#headerwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#header {
color: white;
background-color: black;
}
#titlewrapper {
background-color: red;
width: 100%;
height: 8em;
}
#title {
color: white;
background-color: black;
}
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
#content {
color: white;
background-color: black;
}
#locationwrapper {
background-color: yellow;
width: 100%;
height: 8em;
}
#location {
color: white;
background-color: black;
}
#footerwrapper {
background-color: brown;
width: 100%;
height: 100%;
}
#copyrightwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#copyright {
color: white;
background-color: black;
}
If you want the "content" sections to dynamically adjust height, take off the fixed height.
Change:
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
To:
#contentwrapper {
background-color: blue;
width: 100%;
}
Working fiddle to your requirement: http://jsfiddle.net/k5YUu/6/