CODEWITHSUNDEEP
html
Darien Fawkes
Darien Fawkes

Reputation: 3103

How do I display div inline?

<div style='float:left; width:300px; overflow:hidden;'>
   <div style='float:left; width:100px; '>1</div>
   <div style='float:left; width:100px; '>2</div>
   <div style='float:left; width:100px; '>3</div>
   <div style='float:left; width:100px; '>4</div>
</div>

I need to display 'div' inline another 'div'. I have some difficulties with css style display:inline-block. Outer 'div' should have some width. div inside have to display inline. In example last 'div' should be invisible, but stay inline with other.

Upvotes: 2

Views: 7199

Answers (2)

Darien Fawkes
Darien Fawkes

Reputation: 3103

<style>
    ul#display-inline-block-example,
    ul#display-inline-block-example li {
        /* Setting a common base */                
        margin: 0px;
                padding:0px;
    }

    ul#display-inline-block-example li {
        display: inline-block;
        min-height: 100px;
        background: #ccc;
    }

</style>

<div style='width: 200px; overflow:hidden;'>
<ul id="display-inline-block-example" style='width:350px; height:100px;'>
    <li><div style='width:100px;'>1</div></li>
    <li><div style='width:100px;'>2</div></li>
    <li><div style='width:100px;'>3</div></li>
</ul>
</div>

Upvotes: 0

Peter Girnus
Peter Girnus

Reputation: 2729

Use this CSS on your wrapper div

.container{
    overflow: auto;
    white-space:nowrap;
}

& take out float and use inline-block instead.

 div{
       display: inline-block;  
    }

CODEPEN DEMO

Now you have an inline horizontal scroll!

Upvotes: 2

Related Questions