CODEWITHSUNDEEP
csshtmltwitter-bootstrap
user1663544
user1663544

Reputation: 135

2 divs next to each other without using width

I am trying to figure our how to have 2 divs exactly next to each other, but without using anything like width or so.

I am using Bootstrap Responsive, I have disabled the right div. Though, the div on the left still looks like there would be a right div also.

Is there any way to do this?

.rightinfo { /* On the right */

float:right;
padding:5px;
position:relative;
top: 0;
right: 0;
margin-left:500px; /* Any kind of margin in here doesn't work, even without width */
}

.maininfo { /* On the left */
    background:#CAD2E0;
    padding: 5px;
    width: 69%; /* Even if there's margin-left on the right div, this still overrides it and uses the whole page size if it's 100% width*/
}

Upvotes: 1

Views: 205

Answers (5)

Creaven
Creaven

Reputation: 319

Bootstrap will have this inbuilt.

Use your layout classes.
<div class:container>
<div class:row-fluid>
<div class: Col-md-6 >
First div
</div>
<div class: Col-md-6 >
Second div
</div>
</div>
 </div>

If you want to offset this can also be done. Bootstrap documentation is excellent.

If not using bootstrap inline block is your friend.

Upvotes: 0

user4114638
user4114638

Reputation:

Use this style on both divs:

float:left

Upvotes: 1

OctoD
OctoD

Reputation: 361

add a common class to both:

.myfloatingdiv{

display: inline-block; float: left;

}

just remember to have the divs in a reversed order...

myrightdiv myleftdiv

Hope it helps :)

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

....................................

Hi now define white-space nowrap css

as like this

<style type="text/css">
.someclass{
white-space:nowrap;
font-size:0;
}
.itemcss
{
display:inline-block;
vertical-align:top;
font-size:12px;
 }
</style>

HTML

<div class="someclass">
<div class="itemcss"></div>
<div class="itemcss"></div>
<div class="itemcss"></div>
</div>

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

Try like this

<style type="text/css">
div.item
{
 float:left;
 }
</style>
<div style="float:left" id="items-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Upvotes: 0

Related Questions