Kosem Kosem - 5 months ago 7
CSS Question

How to make the green DIV fit right after 2 upper divs?

What can I do in order for the dark green div (Inner3) to be right after (under) the blue and pink divs (Inner1 and Inner2 respectively)?. Currently there is some kind of "space".

Note: I put the orange div on purpose after them and only then the green one, the formation does matter (I'm trying to learn how to change css when changing resolutions on media query).



.OuterDiv {
width: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
background-color: #E3EAD7;
height: 100%;
}
.Inner1 {
width: 30%;
background-color: #6D97C0;
padding: 0px;
margin: 0px;
overflow: hidden;
height: 200px;
float: left;
}
.Inner2 {
width: 30%;
background-color: #ECB7D8;
padding: 0px;
margin: 0px;
overflow: hidden;
height: 200px;
float: left;
}
.Inner3 {
width: 300px;
background-color: #F5E6AD;
padding: 0px;
margin: 0px;
overflow: hidden;
height: 300px;
}
.Inner4 {
width: 60%;
background-color: #728666;
padding: 0px;
margin: 0px;
overflow: hidden;
height: 200px;
float: left;
}

<body>

<div class="OuterDiv">
<div class="Inner1"></div>
<div class="Inner2"></div>
<div class="Inner3"></div>
<div class="Inner4"></div>
</div>

</body>




Answer

just changed the following:

.Inner3 {
 ...
  float:right;
}

and it worked like a charm.

JSFiddle Demo

Comments