css: How to float div according to 2nd div in hierarchy

Tags: css,layout

Problem :

I need this blue div to be next to red div, while yellow div must remain in place.


How to do this without using something like position:absolute, float:none - etc... nasty hacks?

Solution :

Add margin-top: -50px to the big div.

Alternatively, you can also wrap the small divs in another div, and float that. Depends on the situation.

And position: absolute, float: none are not nasty hacks at all, they are the best friends of a sitebuilder :).

    CSS Howto..

    How to use css selector with class prefix by dojo?

    How can I conform to a 4 nest rule?

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    How to enlarge an image horizontally in css?

    how to make div static in css

    How do i hook media queries to screen resolution?

    How can set text row limit using angularJs ng-repeat?

    How can I insert text before an item with CSS?

    how i can fit text to an image with css

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    How to get rid of space and align two objects in one line in css/html?

    How to Detect css style by iPhone/iPad

    How to add a css class into my function

    How to achieve a fancy outline around an image in CSS

    CSS how to make 100% height in this case

    How to change a span to look like a pre with CSS?

    How to center list of links in a straight line. CSS

    How to merge CSS classes?

    How to HTML/CSS Limit / Clip / Mask an object?

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How to do valid CSS for li text and li text with image?

    how to show an arrow to the only li item that has sub-menu

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    How do I select columns including colspans in a table?

    How to add an additional css class from code behind using ASP.NET?

    How to make a fixed menu/sidebar while using position:relative?

    How to make div inside table same size as text inside a?

    How do I chain an infinite css animation to a one-time css animation?

    Background-Image does not show properly on IE8

    How to locate element inside css footer