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>
Related
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 7 years ago.
Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?
How it should look like:
Code:
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
display: block;
}
#one {
width: 40%;
float: left;
background: red;
}
#two {
background: yellow;
}
#three {
width: 40%;
float: inherit;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
Check this fiddle
#wrap::after {
display: block;
height: 0px;
clear: both;
float: none;
}
#wrap div {
float: left;
word-break: break-all;
}
#one {
width: 40%;
background-color: red;
}
#two {
width: 20%;
background-color: yellow;
}
#three {
width: 40%;
background-color: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
#two and #three(inherits from parent which is none) do not have float:left and you should give width to those element. For example, here I give width:32% to all div elements(#one, #two, #three).
.fl-l
{
float:left;
word-break: break-all;
width: 32%;
}
#wrap{
width:auto;
margin:0 auto;
border:0px solid;
height:200px;
display:block;
}
#one {
background:red;
}
#two {
background:yellow;
}
#three {
background:blue;
}
<div id="wrap">
<div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
To fix the width, set an absolute value to the wrap element.
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
word-break: break-all;
font-size: 0;
}
#wrap > div {
height: 100%;
display: inline-block;
overflow: auto;
font-size: 14px;
}
#one {
width: 40%;
background: red;
}
#two {
width: 20%;
background: yellow;
}
#three {
width: 40%;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
Help me please, I can't understand result of my simply code:
<div id="wrapper-top">
<div class="wrapper">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
and css file:
#wrapper-top
{
width: 100%;
background-color: gray;
}
.wrapper
{
margin: 0 150px 0 150px;
}
#logo
{
width: 100%;
height: 50px;
}
#menu
{
width: 100%;
height: 50px;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper.
I don't expected that because I want this blocks inside .wrapper.
http://jsfiddle.net/4yvLv853/1/
You need to contain the floated items in the #content div
One method (there are others as detailed here) is to use overflow:hidden
#content
{
width: 100%;
background-color: white;
overflow: hidden;
}
JSfiddle Demo
use clearfix
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#wrapper-top
{
width: 100%;
background-color: gray;
border: solid blue 1px;
}
.wrapper
{
margin: 0 150px 0 150px;
border: solid brown 1px;
}
#logo
{
width: 100%;
background-color: white;
}
#menu
{
width: 100%;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
<div id="wrapper-top">
<div class="wrapper clearfix">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">block-1-1</div>
<div class="block-3-1">block-3-1</div>
<div class="block-3-2">block-3-2</div>
<div class="block-3-3">block-3-3</div>
</div>
</div>
</div>
Try
<div id="wrapper-top">
<div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
I think the wrapper height is too small.
Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to
#content {
overflow-y: scroll;
overflow-x: hidden; //this gets rid of the pesky bottom scrollbar
}
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.