Clever Geek Handbook

CSS: How do I clear a floated object just one level and not to the left?

I'm not sure if I described this correctly. I want the object among all floats to clear, but not all the way to the left.

JSfiddle

#parent {
  background: greenyellow;
  width: 500px;
  height: 700px;
  padding: 15px;
}
#parent>div {
  float: left;
}
#object1 {
  width: 40px;
  height: 300px;
  background: blue;
}
#object2 {
  width: 100px;
  height: 100px;
  background: red;
}
#object3 {
  width: 100px;
  height: 100px;
  background: purple;
}
      

        
        
        
      

    
<div id="parent">

  <div id="object1">


  </div>
  <div id="object2">

  </div>
  <div id="object3">
  </div>

</div>
Run codeHide result


As in the jsfiddle. I want the purple box to be below the red box. And I don't want to shrink my parent width. And I dont want to contain red and purple inside the div.

Is there a way for this. Thanks?

+3


source to share


3 answers


Set the bottom width for the parent,

#parent {width: 200px;}

http://jsfiddle.net/db0xacps/1/



Or wrap the right elements, the styles will be the same as yours.

<div id="parent">
     <div id="object1"></div>  
     <div>
         <div id="object2"></div>
         <div id="object3"></div>
    </div>
</div>

http://jsfiddle.net/db0xacps/2/

0


source


Use these styles in # object3:



clear:left; margin:-200px 0px 0px 40px;

    #object3
    {
        width:100px;
        height:100px;
        background:purple;

        clear:left; margin:-200px 0px 0px 40px;
    }
0


source


Some do clear: left(x-level)

n't exist. If you don't want to change the width of the wrapper to make the element move, you can change the outer width of the element itself by adding to margin-right

.

#object3
{
  margin-right: 300px;
}
0


source






More articles:


All Articles