CODEWITHSUNDEEP
csspositioningwindow-resize
marcinf2
marcinf2

Reputation: 83

How to position two elements inline even when the window is resized ?

I'd like this two elements :

http://gyazo.com/44b1b0417d74b05287fe774a4d482bf0

to be in one row all the time, no matter if the window is horizontally resized. Because now they breaks into two rows like on this screen :

http://gyazo.com/1820dc436dba2e827b330039109dc0ee

I tried float one element left and other right but it doesnt work.

Please can you give me a hints how to do this ? Thanks!

Upvotes: 0

Views: 72

Answers (2)

Nick R
Nick R

Reputation: 7794

The trick is to use max-width:100%; and height:auto on the img tag

JSFiddle Demo

HTML

<div class="wrapper">
    <div class="left">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="right">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="clr"></div>
</div>

CSS

.wrapper {
    width:50%;
    margin:0 auto;
    border:1px solid red;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:50%;
    float:right;
}
.clr {
    clear:both;
}
img {
    max-width:100%;
    height:auto;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

2 elements inline can remain side side no matter rooms they have if you set on parent 

white-space:nowrap;

Don't forget to reset white-space to normal for childs :)

Upvotes: 1

Related Questions