div layout with float: left

Question

How can I make this html structure

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

be displayed like this while div#1 and #2 have css float:left

( id names are integers only for demonstration purposes )

Answer 1

First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.

Here's a demo:

#one,
#two {
  float: left;
}
#one {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#two {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#three {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#one {
  background: pink;
}
#two {
  background: brown;
}
#three {
  background: gray;
}
div#row-left {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  vertical-align: top;
}
div#row-right {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

<div id="row-left">
  <div id="one">One</div>
  <div id="two">Two</div>
</div>
<div id="row-right">
  <div id="three">Three</div>
</div>

Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:

#wrapper {
  text-align: right;
}
#one,
#two {
  float: left;
}
#one {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#two {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#three {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
}
#one {
  background: pink;
}
#two {
  background: brown;
}
#three {
  background: gray;
}
div#row-left {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  vertical-align: top;
}
div#row-right {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

<div id="wrapper">
  <div id="row-left">
    <div id="one">One</div>
    <div id="two">Two</div>
  </div>
  <div id="row-right">
    <div id="three">Three</div>
  </div>
</div>

Answer 2

If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.

HTML

<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>

CSS using inline-block (jsfiddle):

div {
    width: 200px;
    height: 200px;
    margin: 10px;
}
#d1 {
    float: left;
    background-color: rgba(255,0,0,0.3);
}
#d2 {
    float: left;
    clear: left;
    background-color: rgba(0,255,0,0.3);
}
#d3 {
    background-color: rgba(0,0,255,0.3);
    display: inline-block;
}

CSS using relative positioning (jsfiddle):

div {
    width: 200px;
    height: 200px;
    margin: 10px;
}
#d1 {
    float: left;
    background-color: rgba(255,0,0,0.3);
}
#d2 {
    float: left;
    clear: left;
    background-color: rgba(0,255,0,0.3);
}
#d3 {
    background-color: rgba(0,0,255,0.3);
    clear: both;
    position: relative;
    left: 220px;
    top: -430px;
}

Answer 3

Fixed here - http://jsfiddle.net/3147og96/1/ html:

<div class="parent">
    <div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

</div>

css:

.parent {
    height: auto;
    width: 120px;
    padding: 5px;
    padding-left: 110px;
    border: 1px solid red;
}

.parent div {
    height: 50px;
    width: 50px;
    border: 1px solid red;
    display: inline-block;
}

#one, #two {

    float: left;
}