I'm trying to align my div #black under the div #brown, but it goes under the div #grey. How can I solve this problem?
This is how it looks now:
https://s18.postimg.org/n0fywi4qv/image.png
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#brown {
height:200px;
width:35%;
float:left;
background-color: brown;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
#black {
height:200px;
width:35%;
background-color: black;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="brown"></div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
<div id="black"></div>
</body>
</html>
This is how it should look like:
https://s21.postimg.org/3kyo9etqt/image.png
You need to combine #brown and #black into .combined <div>
Have a look at the code below:
.combined {
width: 35%;
float: left;
}
#brown {
height:200px;
display: block;
background-color: brown;
}
#black {
height:200px;
background-color: black;
}
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
<div id="cyan"></div>
<div class="combined">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
Or, you can wrap the elements in a container, that way it will work even if the size of the elements change (although you're using fixed sizes with px, which is not recommended)
#cyan {
height:100px;
width: 100%;
background-color: cyan;
}
#brown {
height:200px;
width:100%;
float:left;
background-color: brown;
}
#orange {
height:400px;
width:25%;
background-color: orange;
float: left;
}
#blue {
height:400px;
width:20%;
background-color: blue;
float: left;
}
#white {
height:800px;
width:20%;
background-color: grey;
float: left;
}
#black {
height:200px;
width:100%;
background-color: black;
float: left;
}
#brownblackcontainer {
height: 400px;
width: 35%;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="brownblackcontainer">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
</body>
</html>
Remove float and width property from #black and #brown rules
Wrap both in a #column-left container
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cyan"></div>
<div id="column-left">
<div id="brown"></div>
<div id="black"></div>
</div>
<div id="orange"></div>
<div id="blue"></div>
<div id="white"></div>
</body>
</html>
css
#column-left {
width: 35%;
float: left
}
#cyan {
height: 100px;
width: 100%;
background-color: cyan;
}
#brown {
height: 200px;
background-color: brown;
}
#orange {
height: 400px;
width: 25%;
background-color: orange;
float: left;
}
#blue {
height: 400px;
width: 20%;
background-color: blue;
float: left;
}
#white {
height: 800px;
width: 20%;
background-color: grey;
float: left;
}
#black {
height: 200px;
background-color: black;
}
Related
How do I align these divs so the green one goes to the left corner between red and yellow divs?
<!DOCTYPE html>
<html>
<head><link href="style.css" rel="stylesheet" type="text/css"></head>
<body>
<div id='red'></div>
<div id='blue'></div>
<div id='yellow'></div>
<div id='green'></div>
</body>
</html>
#red
{
background-color: red;
height:500px;
width: 25%;
float: left;
}
#blue
{
background-color: blue;
height: 150px;
width:75%;
float: left;
}
#green
{
background-color: green;
height: 300px;
width: 25%;
float: left;
}
#yellow
{
background-color: yellow;
height:650px;
width:75%;
float: left;
}
You could use float: right; for your blue and yellow div :
#red
{
background-color: red;
height:500px;
width: 25%;
float: left;
}
#blue
{
background-color: blue;
height: 150px;
width:75%;
float: right;
}
#green
{
background-color: green;
height: 300px;
width: 25%;
float: left;
}
#yellow
{
background-color: yellow;
height:650px;
width:75%;
float: right;
}
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>
To set the green one in the corner just specify the alignment positions for each div.This would bring the green to the left most corner.Specify the correct alignment for each colors.I have provided the code for your reference
<style>
#red
{
background-color: red;
height:500px;
width: 25%;
float: left;
}
#blue
{
background-color: blue;
height: 150px;
width:75%;
float: right;
}
#green
{
background-color: green;
height: 300px;
width: 25%;
float: left;
}
#yellow
{
background-color: yellow;
height:650px;
width:75%;
float: right;
}
</style>
<head>
<link href="style.css" rel="stylesheet" type="text/css"></head>
<body>
<div id='red'></div>
<div id='blue'></div>
<div id='yellow'></div>
<div id='green'></div>
</body>
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>
I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. It keeps on coming out of the main div or container.
Here's my simple homepage design but the divs are not indenting properly according to this layout:
#container{
background-color:white;
width:100%;
height:1200px;
}
#logo{
background-color:yellow;
width:30%;
height:100px;
float:left;
}
#header{
background-color:green;
width:100%;
height:100px;
float:left;
}
#navigation{
width:100%;
height:40px;
background-color:white;
float:left;
}
#webname{
background-color:gray;
width:70%;
height:100px;
float:right;
}
#mainclass{
width:100%;
height:950px;
float:left;
}
#asideright{
background-color:red;
width:10%;
height:950px;
float:right;
}
#asideleft{
background-color:purple;
width:20%;
height:950px;
float:left;
}
#selection{
background-color:yellow;
width:70%;
height:950px;
float:center;
}
#footer{
background-color:green;
width:100%;
height:100px;
float:;left;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="webname">
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
this is your correct css
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
There is no such property as float: center; you have to change that property for #selection to float: left;.
Please refer to this tutorial.
You can use this approach .
*
{
margin: 0;
padding: 0;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color:red;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.inner_div
{
width: 25%;
float:left;
background-color:green;
}
.big_div
{
width: 75%;
float:left;
background-color:yellow;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="inner_div" style="background-color:purple;">
i'm the inner container
</div>
<div class="inner_div" style="background-color:pink;">
i'm another one
</div>
<div class="inner_div" style="background-color:green;">
another one
</div>
<div class="inner_div" style="background-color:orange;">
woho! another one
</div>
<div class="big_div">
yipee! i'm another container
</div>
<div class="inner_div" style="background-color:red;">
yehaa! i'm another container
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
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
}
how can I display the given html structure while all divs has float: left ?
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
This is how i did it.
div {
margin: 10px;
overflow: auto;
display: inline;
clear: none;
float: left;
}
#container {
max-width: 390px;
display: block;
}
#d1 {
background: red;
width: 200px;
height: 100px;
}
#d2 {
background: blue;
width: 150px;
height: 150px;
float: right;
}
#d3 {
background: green;
width: 200px;
height: 150px;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
Just needs the second element to be floated right within a container div.
I'm sorry this answer is vague, but it's only as vague as your question. An example of how this could be done is below:
#container {
float: left;
}
#d1 {
width: 200px;
height: 100px;
background: blue;
}
#d2 {
width: 200px;
height: 100px;
background: green;
}
#d3 {
width: 100px;
height: 200px;
background: red;
float: left;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
</div>
<div id="d3"></div>
I hope you get some inspiration . . .
You put a container div around div one and three
#container
{
width:80%;
float:left;
}
#three
{
width:20%;
float:left;
background-color:blue;
height:600px;
}
#one, #two
{
background-color:green;
margin:10px 10px;
height:300px;
}
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="three">3</div>