CODEWITHSUNDEEP
htmlcss
ssD
ssD

Reputation: 359

Floating two divs to right next to each other

I want to float two divs next to each other on right. The rightmost div has variable text so I want the left div to keep moving left but stick to the right div with variable data. When ever I do float:right to both the left div replaces the right div.

<div class="wrap">
<div class ="left">static data<div>
<div class ="right">variable data<div>
<div class="wrap">

css 
 .left{
   float:right;
   width:69%;
   display:block;
  }
 .right{
  float:right;
  width:28%;
  display:block;
 }
 .wrap{
 width:100%;
 }

the right and left divs further have some divs in them but without any classes. How can I handle this issue . The left div takes over the right div when dispalying.

Thanks,

Upvotes: 0

Views: 11664

Answers (3)

eric.mcgregor
eric.mcgregor

Reputation: 3653

Without swapping the divs in the HTML, float the wrapper div to the right and make the child divs inline-block.

css 
 .wrap{
   float: right;
 }
 .left{
   width: 69%;
   display: inline-block;
  }
 .right{
  width: 28%;
  display: inline-block;
 }

Upvotes: 0

Roger
Roger

Reputation: 2952

You might want to trigger something called a block formatting context. Just set the partner's overflow property to a value different than the default. If you need backwards support (ie family), play with zoom: 1; Also, put the floating divs first.

.right {
    width: 28%;
    float: right;
}
.left {
    overflow: auto;
}
.wrap{
    width:100%;
}

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

http://jsfiddle.net/GMwjQ/

There already exists a thread that posted this answer somewhere in SO. Can't find it.

Upvotes: 0

Danield
Danield

Reputation: 125413

I think you just want to swap the divs.

The first child div is floated all the way to the rhs

The second right-floated div is displayed to the left of the first one

FIDDLE

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

css

 .left, .right{
    float:right;
 }

Upvotes: 6

Related Questions