CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 732

How to move the right div to the right with css

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.

Upvotes: 1

Views: 13737

Answers (6)

Gabriele Carbonai
Gabriele Carbonai

Reputation: 459

It's really easy to do. Just use float: right;

.right {
   display: inline-block;
   width: 70%;
   border: 1px solid grey;
   float: right;
}

Upvotes: 3

BlackHatSamurai
BlackHatSamurai

Reputation: 23493

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

Upvotes: 0

Gemtastic
Gemtastic

Reputation: 6433

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

Upvotes: 1

nikhil
nikhil

Reputation: 411

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

Upvotes: 2

Vincent Charette
Vincent Charette

Reputation: 136

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%;
}

Upvotes: 0

Kadeem L
Kadeem L

Reputation: 863

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.

Upvotes: 1

Related Questions