CODEWITHSUNDEEP
htmlcssposition
Vecta
Vecta

Reputation: 2350

How can I position one div to the right of two others?

I'm trying to position three elements inside a div and I'm having some trouble.

Two of these elements need to be stacked to the left and one floated to the right.

Placing #three above the other content and floating it to the right allows it to appear in the correct location. However, once my media queries kick in on small screens and those three elements jump to 100% width it appears in the incorrect order.

How can I position #three so it appears at the same height at #one and #two without having to re-order them?

I cannot tuck #two inside #one as it is not relevant to the address tag.

#container {
  width: 100%;
  background-color: red;
  height: 150px;
}

#one, #two {
  width: 40%;
}

#three {
  float: right;
  }

#one {
  background-color: green;
  }
#two {
  background-color: blue;
  }
#three {
  background-color: orange;
  }
<section id="container">
  <address id="one">
    <p>text text text <br> text text <br> text</p>
    </address>
  <div id="two">
    <p>text text text text </p>
    </div>
  <nav id="three">
    <p>text text text <br> text text <br> text</p>
    </nav>
</section>

Upvotes: 0

Views: 56

Answers (3)

Vineet Mishra
Vineet Mishra

Reputation: 100

put max width of #div3 as 20%.

Upvotes: 0

Hkidd
Hkidd

Reputation: 912

You had to put the #one and #two into another container. I've added a .left and .right class for the floats.

The definition of a float, according to the W3C:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

So what happens is that #three floats right, but is put down to the right side of #two. Also #two needed a clear: left because the float property displays every float in-line. The clear: left is like a new row. When the width of the browser becomes smaller, #three floats under #two since it follows the float rule.

See my fiddle for the result: http://jsfiddle.net/54ej9wt5/

Upvotes: 0

Noah B
Noah B

Reputation: 331

Can you position #three absolutely? When your media queries kick in, then position it back at relative. http://jsfiddle.net/L0v8ozjq/

Upvotes: 1

Related Questions