Why leave the column to "push" the content of the right column?
I have implemented a one-line one-time column layout and I don't know why the left column (relative to the height) is "pushing" my piece of content down.
.profile-left-column {
width: 105px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 15px;
float: left;
height: 500px;
background: #ddd;
}
.profile-right-column {
margin-left: 105px;
padding: 0 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 1265px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.clearfix:after {
content:"";
display: block;
height: 0;
width: 100%;
clear: both;
}
.gc:after {
content:"";
display: block;
height: 0;
clear: both;
}
.gcpad {
margin-left: -10px;
margin-right: -10px;
}
.g1_4 {
width: 25%;
float: left;
margin-left: 0;
margin-right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 20px;
background: #66f;
}
.gpad {
padding: 0 10px;
}
<div class="profile-left-column"></div>
<div class="profile-right-column">
<div>
<div class="gc gcpad">
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
</div>
<div class="gc gcpad">
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
<div class="g1_4 gpad"></div>
</div>
</div>
</div>
Here is a JSFiddle: http://jsfiddle.net/v3gma4d2/1/ (those two blue bars should be directly below you)
Can someone explain to me why this is happening? And how to solve the problems?
source to share
When you set an element to float, elements after the floated element will traverse it. Imagine that we usually float the image, and the text (just a few lines) next to the image even goes under the image.
You have a similar case, you only set the left column to float, the right column actually flows around it, and as soon as the clearfix is added, everything is aborted right away. See Simple demo.
.left {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.right {
border: 1px solid green;
}
.inner {
border: 1px solid blue;
}
.inner:after {
content: "";
display: block;
clear: both;
}
<div class="left">1</div>
<div class="right">
2
<div class="inner">3</div>
4
</div>
To fix the problem . You can either set the correct column to overflow:auto
, or hidden
have it not boxed under the left column.
.left {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.right {
border: 1px solid green;
overflow: auto; /*ADDED*/
}
.inner {
border: 1px solid blue;
}
.inner:after {
content: "";
display: block;
clear: both;
}
<div class="left">1</div>
<div class="right">
2
<div class="inner">3</div>
4
</div>
Or , to set the correct column to float (you will also need to give it fixed or percentage width
, the CSS feature can be very helpful in this case.). calc()
* { box-sizing: border-box; }
.left {
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
.right {
float: left; /*ADDED*/
width: calc(100% - 100px); /*ADDED*/
border: 1px solid green;
}
.inner {
border: 1px solid blue;
}
.inner:after {
content: "";
display: block;
clear: both;
}
<div class="left">1</div>
<div class="right">
2
<div class="inner">3</div>
4
</div>
source to share