14

I have two inline divs which exceed in width the parent's width. Therefore the second div jumps to the next line: http://jsfiddle.net/uVqG6/2/

How can I keep both divs on the same line?

Adding overflow:hidden; to div.a simply hides the second div.

TheOne
  • 10,819
  • 20
  • 81
  • 119

4 Answers4

13

Theres a couple of ways to do this. First of all, you can use display: inline-block; or float: left; to get the divs to sit side by side. They work different, so be sure to use the right one for your case.

Second, neither of those will work unless the containing div (a) is large enough to contain both of the divs on the same line. Or, you can use overflow: hidden; on the containing div (a).

Edit:

I've updated your example: http://jsfiddle.net/uVqG6/11/

I had to use white-space: nowrap;, since the inside divs were wrapping.

Here's another answer which also answers your question: CSS: how to stop text from taking up more than 1 line?

Remeber that using display: inline-block basically treats the element as text, so most text-formatting css properties will apply to it.

Community
  • 1
  • 1
cwharris
  • 17,835
  • 4
  • 44
  • 64
9

You can use position: absolute; for this, else no other way except increasing your container div width or making it nowrap

Demo

Using z-index Demo

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    The absolute position solution is a hack, and your specific implementation is changing the display order of the divs. – cwharris Dec 26 '12 at 19:05
  • 4
    Using `white-space: no-wrap;` didn't seem to help in my case. Absolute positioning however did the trick. – TheOne Dec 26 '12 at 19:07
  • 1
    @Ramin, I updated your example specifically to work with no-wrap. Mr Alien's solution is still a hack, which will only work for 2 elements. If that's all you need, that's fine, but you'll have to learn a different solution in the future if you ever want to add an additional element. That, or keep adding css for each new element. – cwharris Dec 26 '12 at 20:21
8

Inline elements behave in much the same way as text does. If you want to prevent them from wrapping, either remove the white space you have used for formatting, or add white-space:nowrap; to the rule for .a.

Here is a demonstration: http://jsfiddle.net/bfkgT/

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
7
.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }

Does this do what you want?

Matt
  • 3,143
  • 1
  • 17
  • 14