CSS: How to clear a floating object only one level, not the all the way to the left?


Tags: html,css

Problem :

Im not sure if im describing this correctly. I want an object among all floating objects 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>

As in, in the jsfiddle. I want the purple box to come below red box. And no i dont want to reduce my parent's width. And i dont want to contain red and purple inside a div.

Is there way for it. Thanks?



Solution :

Set lower width to parent,

#parent {width: 200px;}

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

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

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

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


    CSS Howto..

    how to make NGINX serve static content like .js, .css, .html?

    How to get hyperlinks inside a “pop-up” term reference on mouse-over, and seperate the HTML term from the “pop-up” reference content

    How to set Bootstrap's hero unit height to 100%?

    How does the following line of JavaScript work?

    SceneBuilder (by gluon) doesn't show imported fonts

    How create a grid in which a variable number of squares automatically resize to fit a space?

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to customize the look and feel of rich faces tab panel

    CSS and JS: How to Inflate the Size of a Tile In Grid

    How to Access local CSS file from within Alfresco Javascript?

    How to style HTML select option hover and selected option effects

    How can I make the menu to wrap when I resize my browser?

    How to make a rollover div clickable?

    how to implement “blog” page in HTML/CSS? [closed]

    How to add threshhold onclick() jQuery?

    how to manage Css Floats

    How to add a CSS specifc for Google Chrome? [duplicate]

    How to redefine CSS classes with Javascript

    CSS div border shows up, but is transparent

    How to Prevent Linke break for Divs in CSS?

    How to give different color to draghandle in RangeSlider

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to add css to a single mvc Helper method when validation fails - from within the model

    How I write a:hover::before in less file?

    How to remove a element after animation?

    How to persist local CSS change to server record?

    How to write CSS code without using :not selector?

    How to select the first, second, or third element with a given class name?

    How to remove CSS mousedown effects

    How can you have your websites resolution change according to the users screen resolution?