How can I avoid div from executing new line if one line is already full?

Question

How can I avoid <div> tags from executing new line if one line is already full. Let's assume that this div has group of images.

------------------------------------
|                                  |
|     Image 1           Image 2    |
|                                  |
|                                  |
|     Image 3           Image 4    |
|                                  |
------------------------------------

The images in the <div> executes new line during the php loop and appears a scroll bar because of the overflow: scroll; code in CSS. My desired output is:

|----------------------------------|
|                                  |
|     Image 1      Image 2     Imag|
|                                  |
|                                  |
|----------------------------------|

Note: Image 3 and 4, prints if you scroll the div to the side.

That's my desired output wherein there will be a horizontal scroll bar and the view of the scroll would be horizontal. Any idea on how to do this?

Can you share the _complete_ and _relevant_ code, both HTML and CSS — Tushar, Sep 08 '15 at 05:27

score 1 · Accepted Answer · answered Sep 08 '15 at 05:28

1

Apply white-space: nowrap; to your div.

div{
  white-space: nowrap;
}

answered Sep 08 '15 at 05:28

Bhojendra Rauniyar

83,432
35
168
231

Try your-self and you may know that. It's the way that the images are wrapped into one single line. – Bhojendra Rauniyar Sep 08 '15 at 05:37

score 1 · Answer 2 · answered Sep 08 '15 at 05:31

1

Added white-space: nowrap; display:inline-block; to your div

answered Sep 08 '15 at 05:31

Arun Kumar M

1,633
1
15
26

elements will never wrap – Arun Kumar M Sep 08 '15 at 05:34

score 1 · Answer 3 · answered Sep 08 '15 at 05:39

Just try this:

.imgbox {
    height:300px;
    width:100%;
    overflow-y:hidden;
    overflow-x:auto;
    border:1px solid red;
    white-space: nowrap;
}

img
{
    height:300px;
}

<div class="imgbox">
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="image1" />
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="image1" />
    <img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" alt="image1" />
    <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" alt="image1" />
</div>

Note: If you want only horizontal scroll, you must specify overflow-y:hidden; & overflow-x:auto; so it would hide vertical scroll-bar and will give horizontal scroll-bar only if required.

Hope this might help you.

How can I avoid div from executing new line if one line is already full?

3 Answers3