CODEWITHSUNDEEP
htmlcss
user3247816
user3247816

Reputation: 1

How to keep images float in the same line?

(I'm a fresh newbie-So be gentle)

My images float to a new line instead of staying in one line, when I change the window size.

How can I keep the inages on the same line?

html

<div class="home-boxes">
    <article class="news" >
        <img class="new-img" src="man.png" >
        <span class="main-title">NEWS</span>
    </article>
    <article class="news" >
        <img class="new-img" src="kids2.png" >
        <span class="main-title">KIDS</span>
    </article>
    <article class="news" >
        <img class="new-img" src="babys.png" >
        <span class="main-title">BABIES</span>
    </article>
    <article class="news" >
        <img class="new-img" src="noamt.png" >
        <span class="main-title">BABIES</span>
    </article>      
</div>

CSS

div.home-boxes {
    position: relative;
    width: 1584px;
    overflow: auto;
    width: 100%;
    font-size: 40px;
    line-height: 40px;
    color: #fff;
    font-family: Impact;
    overflow-x: scroll;
    overflow: auto;
}

.news {
    position: relative;
    left: 0px;
    top: 0px;
    float: left;
    height: 396px;
    width: 396px;
    display: inline;
}

(beware: previous post editing broke some of the CSS code i.e. font - size instead of font-size)

Upvotes: 0

Views: 2540

Answers (2)

NoobEditor
NoobEditor

Reputation: 15911

Floated elements occupy the available view-port area to expand, so when you resize, viewport width reduces and hence they wrap in new line, to avoid this

You can do 2 things :

first

either add white-space:nowrap to home-boxes class, this way it will avoid the images to wrap in next line.

Removing unnecessary css, here is one way => http://jsfiddle.net/zV7FC/

second

you can add display:inline-block to home-boxes and news class subsequently together!!

Removing unnecessary css, here is another way => http://jsfiddle.net/zV7FC/1/

Upvotes: 3

JunM
JunM

Reputation: 7160

You can specify % on the width also instead of having it fixed.

http://jsfiddle.net/62UN9/2/

.news
    {
    position: relative;
    float:left;
    height:auto;
    width:25%;
}

Upvotes: 0

Related Questions