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>
      

Run code


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?

+3


source to share


1 answer


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>
      

Run code


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>
      

Run code


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>
      

Run code


+2


source







All Articles