CSS how to have two divs to the right of one div but not beside each other


Tags: html,css

Problem :

I have three divs background-color Red, Yellow and Blue. I am wanting to get the Red div on the left. I want the Yellow div beside the Red. I want the Blue div beside the Red but underneath the Yellow div. I came up with

<html>
     <body>
          <div style="background-color:Red; height:50%; float: left">Red</div>
          <div style="background-color:Yellow; float: left; clear:right">Yellow</div>
          <div style="background-color:Blue; float:left">Blue</div>
     </body>
</html>

This doesn't work however as the Blue div is not underneath the Yellow div but beside it.



Solution :

The easiest way is to wrap them in <div>s to get columns:

<div class="wrapper">
    <div class="red">
        Red
    </div>
</div>
<div class="wrapper">
    <div class="yellow">
        Yellow
    </div>
    <div class="blue">
        Blue
    </div>
</div>

And some CSS:

.wrapper {
    float: left;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}

And a live example: http://jsfiddle.net/ambiguous/aNVam/

If you have specific sizes on your <div>s (or at least on the red one), you can do it without the wrappers using a clear: left and margin-left on the blue one:

<div class="red">
    Red
</div>
<div class="yellow">
    Yellow
</div>
<div class="blue">
    Blue
</div>

And the CSS for this one:

.red {
    background-color: red;
    width: 100px;
    float: left;
}
.yellow {
    background-color: yellow;
    float: left;
    width: 75px;
}
.blue {
    background-color: blue;
    float: left;
    clear: left;
    width: 75px;
    margin-left: 100px; /* see .red */
}

And a live example of this version: http://jsfiddle.net/ambiguous/t8mMt/1/

At least I think that's the layout you're after.


    CSS Howto..

    How to stop jitter of relatively placed items on scrolling with mouse?

    How to make CSS URL background images show up in localhost?

    How to prevent css keyframe animation to run on page load?

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    how can i trigger multiple hover actions/events?

    CSS: how to move element from one column to another one without changing the html?

    How to remove a css class using jquery in a certain screen size

    How best to use jQuery: with HTML or CSS for formatting

    How to setup flexible box CSS through jQuery? css( display, '-moz-box') doesn't seem to work?

    CSS: How to break images into rows?

    How to clean style sheets mess? [duplicate]

    How to add CSS AnimationEnd event handler to GWT widget?

    How to fade in a specific CSS property

    less: how to import multiple css?

    How to use a CSS animation within a JavaScript plugin?

    how to put css max-left or min-left position to absolute object?

    How to rotate an element and correctly position it with CSS or jQuery

    How to set outline without using CSS outline property?

    How to create a horse-shoe-like gauge using CSS

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    How to change logo in php header when change the header js class and CSS

    How do I add css elements to ng-repeat templates?

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    how to center a box using blueprint css framework

    How to create a box with rounded corners at the top, but normal corners at the bottom?

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    how to color the whole star icon when button is clicked

    Third-Level Menu Items Are Always Showing

    How to use nth-child with :hover to style multiple children?

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]