How to move the right div to the right with css - html

Question

Here is a simple box with two columns:
HTML:
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->
CSS:
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
}
Demo
I expected that the right div should be placed on the right side, but it's placed under the left div element. How can I make it done?
Thanks for your help.

Answer 1

It's really easy to do.
Just use float: right;
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
}

Answer 2

You can use box-sizing: border-box; to align it perfectly. No need to use align:right; or adjusted width.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
box-sizing: border-box;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
box-sizing: border-box;
}
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->

Answer 3

Not sure what you want. But if you want the .right div to be on the right side then you need to apply
float:right
See the demo here.
Also you have a border of 1px outside the box. It needs to be inside you could use box-shadow.
-webkit-box-shadow:inset 0px 0px 0px 1px gray;
-moz-box-shadow:inset 0px 0px 0px 1px gray;
box-shadow:inset 0px 0px 0px 1px gray;
See the demo here.
Update: You have no height on the divs, so the height is being established by your text. Simply apply a height.
.left {
height:130px;
.right {
height:130px;
See the example here.

Answer 4

The first issue here is that you're adding 3px as borders. These aren't counted into the % when you measure the width, which makes the inner divs too wide to fit on one line. if you add the following line to the right div you will see what I mean:
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
}
Now we've fixed the second issue; the div will now float to the right as intended, but you can see the boxes are cutting each other's edges. Nowadays there's a nice trick to fix that, and that is box-sizing: border-box; which will automatically match the borders as your div's edge, not outside of it as the standard does.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
box-sizing: border-box;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
box-sizing: border-box;
}
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->

Answer 5

A minimized css file for this could look like this.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left, .right {
height:130px;
display: inline-block;
/* choose your border method
border: 1px solid grey;
Or
-webkit-box-shadow:inset 0px 0px 0px 1px gray;
-moz-box-shadow:inset 0px 0px 0px 1px gray;
box-shadow:inset 0px 0px 0px 1px gray;
*/
}
.left {
float: left;
width: 30%;
text-align: center;
}
.right {
float: right;
width: 70%;
}

Answer 6

To the right div to be on the right, you need to add float:right to the css:
.right {
display: inline-block;
width: 70%;
float:right;
border: 1px solid grey;
}
DEMO