Prevent div from carrying over when browser is resized

Question

I want the second child div to stay on the same line as the first div no matter how much a browser window is resized. Both images are parts of the header (the green div). I have tried to follow other questions asked on here and tried whitespace:nowrap, float:left, changing blocks from inline to inline-block and back, and nothing has helped.

I want to learn, the simplest, cleanest way to implement this, without using hacks, because after reading a bunch of tutorials I obviously still don't understand how this works.

<div style="background:green;">

<div style="display:inline-block;">
<img src="" width=150 height=80>
<br>
Some text
</div>

<div style="display:inline;">
<img src="" width=728 height=90>
</div>

</div>

You use
and you want them to inline? It's impossible, right? — Ringo, Nov 29 '13 at 07:42

score 0 · Answer 1 · answered Nov 29 '13 at 07:48

0

Try this:

<div style="background:green;position: relative;">

<div style="display:inline-block; position: absolute; left: 0; top:0;">
<img src="" width=150 height=80>
Some text
</div>

<div style="display:inline; position: absolute; left: 50%; top: 0;">
<img src="" width=728 height=90>
</div>

</div>

answered Nov 29 '13 at 07:48

Ringo

3,795
3
22
37

Tried that. Some text is supposed to be under the first image, but this way sits between the two images. Also, the second image is supposed to be next to the first one, but here it's floated all the way to the right. – Matthew S Nov 29 '13 at 21:36

score 0 · Answer 2 · answered Nov 29 '13 at 08:07

0

Here you can use the flex property.

<style>

body{
display:flex;
}

.container{
width:100%;
display:flex;
flex-direction:row;
}

.container > div{
width:50%;
background:#ccc;
border:thin solid #000;
}
</style>


<!doctype html>
<html>
<body>

<div class="container">

    <div>
        your first image here
    </div>

    <div>
        your second image here
    </div>

</div>
</body>
</html>

answered Nov 29 '13 at 08:07

bring2dip

886
2
11
22

I need the second image to start right after the first one, but this way it sits all the way on the right. – Matthew S Nov 29 '13 at 21:40
Then you can change the width of div to auto. this way it fits according to the image and the right image starts right after first one – bring2dip Dec 01 '13 at 12:11

score 0 · Answer 3 · answered Nov 30 '13 at 04:24

I have found a stupidly simple solution: it's to include two parent divs instead of one. The first one has flexible width and serves for filling the entire top of the screen with header background/color. The second one is fixed width, wide enough to contain both images. This second container "traps" both images inside the fixed width and does not allow them to carry over.

The first sub-container is inline block (so I can include "Some text" under it), and the second one is regular inline. This way I can add padding or margins to the sub-containers.

I am not a programmer and realize this solution may be frowned upon, but it's the only one that worked :) No floating left/right, absolute positions, white-space nowrap or div clear was required!

<div style="background:green";>

<div style="width:1000px;">

<div style="display:inline-block; padding-left:15px; padding-right:40px">
<img src="" width=150 height=80>
<br>
Text under the header
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
</div>

Prevent div from carrying over when browser is resized

3 Answers3