Html: image going to new line when resizing page - html

Question

I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}

Answer 1

I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>

Answer 2

position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>

Answer 3

With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>

Answer 4

So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)

Answer 5

If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.