How to make the div's appear inline in the following code?

Question

How to make the following div's appear inline in the following html with a scroll

  <div id="scrollable">
  <div class="childDiv">
      <div class="inner">I am the first div in first should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in first should appear inline with the rest of the text</div>
  </div>
  <div class="childDiv">
      <div class="inner">I am the first div in Second should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in Second should appear inlinewith the rest of the text </div>
  </div>

Here is the CSS I have written

    #scrollable {
        width : 50%;
        height : 350px;
        background-color: #d0e4fe;
        overflow-x: scroll;
        overflow-y: hidden;

    }
    .childDiv {
        float: left;

    }
    .inner {
        float : left;
    }

while floating the element the `width` property required. – Kheema Pandey Jul 26 '14 at 12:14 — Kheema Pandey, Jul 26 '14 at 12:14

web-tiki · Accepted Answer · 2014-07-26T13:28:28.787

1

You can use display:inline-block; and white-space:nowrap; to make the divs appear inline and stay on the same line :

DEMO

Inline-block and inline elements render with a white-space between them,

The white-space CSS property is used to to describe how whitespace inside the element is handled.

nowrap : Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

(source: MDN)

CSS :

#scrollable {
    width : 50%;
    height : 350px;
    background-color: #d0e4fe;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}
.childDiv {
    display:inline-block;
    white-space:nowrap;
}
.inner {
    display:inline-block;
}

edited Jul 26 '14 at 13:28

answered Jul 26 '14 at 12:14

web-tiki

99,765
32
217
249

Thanks for help. Why you have used white-space:nowrap; with the scrollable div and the first child div only. – John Doe Jul 26 '14 at 13:21
1

@user1590011 added some more explanation to my answer. – web-tiki Jul 26 '14 at 13:28
So saying "display: inline" is more strict than "float:left". I mean float : left will take up the next line if there is no more space on the current line. – John Doe Jul 26 '14 at 13:37
1

@user1590011 both techniques (`display:inline-blopck;` or `float:left`) will give you the disired layout. The difference is (mainly) that inline-block elements will render with white-space between elements, floats won't. Floats don't expand their parent size and inline/inline-block elements do. I strongly recommend you read about both properties to make a good choise depending on your use case and opinion. you may read more about it on this post : http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – web-tiki Jul 26 '14 at 13:59

score 1 · Answer 2 · answered Jul 26 '14 at 12:18

you have to specify a width on child element. without specifying a width it will containing block horizontally. check the DEMO.

so define a width on your class .childDiv and in .inner.

.childDiv 
{
float: left;
width : 50%; /*required to specify the width*/
background:red; /*just for visibility used here*/
padding:3px;
}
.inner {
float : left;
width : 50%; /*required to specify the width*/
}

How to make the div's appear inline in the following code?

2 Answers2