CODEWITHSUNDEEP
csscss-float
dev.e.loper
dev.e.loper

Reputation: 36034

CSS - Floating two elements side by side

I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.

Here is what I have right now: http://jsfiddle.net/RALza/

HTML

<div id="container">
    <div id="divA"> left text </div>
    <div id="divB">  right text </div>
</div>

CSS

#divA
{
  float:left;
  border:1px solid blue;
  width:100%;
}

#divB
{
  float:right;
  border:1px solid red;
}

Upvotes: 5

Views: 28295

Answers (3)

Aleksandr
Aleksandr

Reputation: 97

You can use CSS flexible boxes:

#container {
  display: flex;
  justify-content: space-between;
}
<div id="container">
    <div id="divA">left text</div>
    <div id="divB">right text</div>
</div>

Upvotes: 4

Alp
Alp

Reputation: 29739

Try this fiddle: http://jsfiddle.net/RALza/6/

It works by changing the order of the two divs and making the first div a normal block element without a float.

<div id="container">
    <div id="divB">  right text </div>
    <div id="divA"> left text </div>
</div>

and

#divA
{
  border:1px solid blue;
}

#divB
{
  float:right;
  border:1px solid red;
}

Upvotes: 1

MatTheCat
MatTheCat

Reputation: 18721

<div id="container">
    <div id="divB">  right text </div>
    <div id="divA"> left text </div>
</div>

#divA
{
  overflow:auto;
  border:1px solid blue;
}

#divB
{
  float:right;
  border:1px solid red;
}

will work.

But you should specify width of floating elements.

Upvotes: 5

Related Questions