CODEWITHSUNDEEP
htmlcss
Mäx Müller
Mäx Müller

Reputation: 253

Placing divs side by side causes linebreak, instead of overflow


I have a small problem with two div's placed side by side.
The left div is always of fixed width, but the right one is not, and if the content is too big it causes a linebreak, which is really annoying.

This is the example code:

Everything's alright here:

<div id="no1">
  <div class="left">This one is on the left side</div>
  <div class="right">This one is on the right side</div>
</div>

CSS:

.left {float: left;}
.right {float: right;}

But if the content of <div class="right"> gets too long, it causes an unpretty linebreak.

I tried setting <div id="no1"> to overflow: auto and overflow: scroll but that didn't do anything.
Then I tried setting the width of no1 big enough, so everything should fit, but that didn't work either.
I am a bit confused on what to do next.

A JsFiddle for demonstration can be found here http://jsfiddle.net/3b4s7ta7/.

Thanks in advance for your help guys!

Solution:
Alright, the solution is easy. As user2482616 and others suggested I only had to set the size of the two div's to 50%, like this:
.left, .right {width: 50%;}

Thank you guys!

Upvotes: 0

Views: 132

Answers (4)

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

Give width to both left and right div. Also, give height to the div with id "no1" to allow scrolling on overflow. And try using a clear:both; instead of giving so many br. You can see the problem in this fiddle.

Here's the working code and its Fiddle

HTML:

<strong>This is how it should be:</strong><br><br>
<div id="no1">
    <div class="left">This content is always left</div>
    <div class="right">This content is always right sided. This content is always right sided.     This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided</div>
</div>

<div class="clearer"></div>  /*replaced br*/

    <strong>This is baaaad:</strong><br><br>
<div id="no2">
    <div class="left">Still on the left side</div>
    <div class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>

CSS:

.left
{
    float: left;
    width:50%;
}
.right
{
   float: right;
   width:50%;
} 

.clearer{
    clear:both;
}
#no1{
   overflow-y:scroll;
   height:150px;
}

Upvotes: 0

Aditya
Aditya

Reputation: 1261

To add scroll, you need to do something like this:

<strong>This is how it should be:</strong>
<br>
<br>
<div id="no1">
    <div class="left">This content is always left</div>
    <div class="right">This content is always right sided</div>
</div>
<br>
<br><strong>This is baaaad:</strong>
<br>
<br>
<div id="no2">
    <div class="left">Still on the left side</div>
    <div style="height: 50px; overflow-y: scroll;" class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>

FIDDLE

Upvotes: 0

Manoj Sharma
Manoj Sharma

Reputation: 616

Try this css:

.left,.right{width: 50%;}

as create separate css query it will make your file large. So try to minimize it by placing common css at once. check your code on Edited Code i have edited.

Upvotes: 1

Rvervuurt
Rvervuurt

Reputation: 8963

Try adding width: 50%; to the divs, like so:

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}

JSFiddle

(Or any width you want of course)

Upvotes: 1

Related Questions