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 keep nav bar from shifting elements to next line when zooming in?

    How to manage clashing third party CSS

    How to get Google menu buttons like styling using CSS

    How can I cut too wide image in HTML?

    How to give border to any element using css without adding border-width to the whole width of element?

    Can you tell me why my webpage displays differently in IE and how to fix it

    How to remove a element after animation?

    How to have JavaScript read a value appended with CSS at a given ID

    How to display picture from center, small frame bigger picture

    How to control the expandability of textarea from width perspective

    How to resize two divs on the click of a link

    How do I make a table's columns fill the width not occupied by fixed-width columns?

    How do I trace my inner pages via google analytics?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to make a button go down when scrolling? (CSS)

    How to do aligning image next to textbox with CSS? [closed]

    How to vertically align text over an image

    CSS while hover a div how to display other class(or) div?

    How to get this image border effect with CSS [closed]

    How to change css for each additional innerHTML element in a javascript for loop

    HTML/CSS buttons don't show in IE properly

    How to set css to a specific selector using jQuery

    How do you solve this problem regarding aligning divs next to each other? [duplicate]

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How to display Bootstrap button label vertically using CSS?

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    How do I display all the data in a MySQL table in a theme? [closed]

    How to make a braille interface for our website

    How do you style an android app?

    How to hide specific text from content wihtout calling any CSS?