How to position two divs to the right of another div, without them being adjacent to each other, using CSS

Question

How to position two divs to the right of another div, without them being adjacent to each other, using CSS

I am trying to arrange three divs with background colors of Red, Yellow, and Blue. The goal is to have the Red div on the left, followed by the Yellow div next to it, and then the Blue div underneath the Yellow one. However, my current code is not producing the desired layout. Here is what I have:

<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>

Despite my efforts, the Blue div ends up beside the Yellow div instead of below it. Any suggestions for achieving the correct positioning?

html css

Answer 1

Answer №1

A simple way to create columns is by enclosing them in <div> tags:

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

You can style them using CSS:

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

Here's a live example for reference: http://jsfiddle.net/ambiguous/aNVam/

If you want to adjust the sizes of the <div> elements without using wrappers, you can utilize clear: left and margin-left:

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

Corresponding CSS styling would be:

.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; /* matched with .red */
}

Here's a live example showcasing this method: http://jsfiddle.net/ambiguous/t8mMt/1/

This layout should suit your needs.

Answer 2

A simple way to create columns is by enclosing them in <div> tags:

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

You can style them using CSS:

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

Here's a live example for reference: http://jsfiddle.net/ambiguous/aNVam/

If you want to adjust the sizes of the <div> elements without using wrappers, you can utilize clear: left and margin-left:

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

Corresponding CSS styling would be:

.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; /* matched with .red */
}

Here's a live example showcasing this method: http://jsfiddle.net/ambiguous/t8mMt/1/

This layout should suit your needs.

Answer 3

Answer №2

Eliminate the float: left; property from the yellow and blue divs, like so:

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

Answer 4

Eliminate the float: left; property from the yellow and blue divs, like so:

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

Answer 5

Answer №3

If you're in need of CSS positioning, that's what you should focus on.

Check out this resource from W3Schools

Answer 6

If you're in need of CSS positioning, that's what you should focus on.

Check out this resource from W3Schools

How to position two divs to the right of another div, without them being adjacent to each other, using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for integrating YouTube links into PHP

Repeated Outcomes in SQL Query

The KeyboardAvoidingView disrupts the structure of the flexbox layout

The canvas element on a simple HTML webpage is constantly set to a size of 300x150

What is the way to restrict the length of input in a v-select component?

Using Clip Path will result in the content always being hidden if it

What is the best way to center a Checkbox in HTML5 and CSS?

Scrollbar width does not expand when hovered over

Importing a substantial number of records from an XML file into an HTML table

Sleek dialog sliding animation with Svelte

Exploring the world of colored tab links in CSS

When it comes to handling media queries, iPhone is geared towards min-width dimensions of 768

Disappearing fixed div in Chrome when hovering over links

Minimize the gap between icon and text on paper-icon-item in Polymer

Shift the image down to the bottom of the sidebar

Leading astray — using htmlentities will not function

In your web projects, how many external conditional stylesheets do you typically incorporate specifically for Internet Explorer?

Emphasize the search term "angular 2"

Tips for adding a red dot at the top-right corner of a necessary HTML input label, similar to an asterisk

Issues with the last-child selector in CSS being unresponsive