Float images into overflow without wrapper div

Question

I got some images into a div.

<div>
   <img />
   <img />
   <img />
   <img />
</div>

All images are set to the same height of 50px. The width is set to auto.

The question is, how do i get the images to float left into a horizontal line that reached into the parent div's overflow area. The parent div need a width of 100%.

I want to set the div to overflow-x: scroll. When the images are simply float: left they break into another line if they extend the divs width. But how can I get them into the overflow, so i have to scroll to see the others?

The main problem is that i can't use js or a wrapper div. The problem has to be solved with css.

Danield · Accepted Answer · 2013-07-14 10:55:00Z

2

Use white-space: nowrap; on the container div and display:inline on the img elements.

FIDDLE

<div>
   <img src="http://placehold.it/350x50"/>
   <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
</div>

div
{
    white-space:nowrap;
    overflow-x: auto;    
}
img
{
    display: inline;
    margin-right: 10px;   
}

answered Jul 14, 2013 at 10:55

Danield

127k37 gold badges235 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jurihandl Over a year ago

This perfectly fits my needs. Thank you very much for your answer! :)

MR.VANZKIE · Accepted Answer · 2013-07-14 10:57:54Z

TRY this.. i hope this one can help you., Cascsading Syle..

    .float_l { float: left }
    .float_r { float: right }
    .col_w200 {
        overflow: scroll;
        height: 300px;
        width: 200px;
    }

    .lp_frontpage { margin: 0; padding: 0; list-style: none }
    .lp_frontpage li {
        margin: 0;
        padding: 0;
        display: inline
    }
    .lp_frontpage li a {
        float: left;
        display: table;
        width: 200px;
        height: 100px;
        margin: 0 10px 10px 0
    }
    .lp_frontpage li a img { width: 190px; height: 90px; border: 1px solid #3c4445; padding: 4px; }

HTML CODE..

                        <div class="col_w200 float_r">
                        <h2>Web Design Gallery</h2>
          <ul class="lp_frontpage">
                            <li><a href="#"><img width="200" height="100" src="images/_01.jpg" alt="Image 01" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_image_02.jpg" alt="Image 02" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_03.jpg" alt="image 03" /></a></li>
                            <li><a href="#"><img width="200" height="100" src="images/_04.jpg" alt="image 04" /></a></li>
                        </ul>


                    </div>

Collectives™ on Stack Overflow

Float images into overflow without wrapper div

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related