Menu
I want to place two arbitrary images side by side inside a DIV element, which is exactly 800 px wide (width=800px). The images can be a variety of sizes, in width and height too. Sometimes width greater than height and sometimes width lesser than height. I put both images inside a div element, and a third div which contains both. I tried this code, but doesn't work properly. How should I do it? JSFiddle: http://jsfiddle.net/gUT43/
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
div {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="max-width: 800px; border:2px black solid">
<div style="height: auto; border:1px green solid"">
<img src=http://i.imgur.com/Xt6vUQD.jpg>
</div>
<div style="height: auto; border:1px blue solid"">
<img src=http://i.imgur.com/BqFMNlq.jpg >
</div>
</div>
</body>
</html>
439
It seems to me that you would want to float: left the divs that contain the images, and then add another div after those elements to clear the float.
A JSFiddle of your code would be excellent, so that we could help in a more effcient manner :)
106
Here is the HTML:
<div class="main_block">
<div class="inner_block">
<img src=http://i.imgur.com/Xt6vUQD.jpg>
</div>
<div class="inner_block">
<img src=http://i.imgur.com/BqFMNlq.jpg >
</div>
</div>
Here is the CSS:
.main_block {
width: 800px;
border: 2px black solid;
}
.main_block: before, .main_block: after {
overflow: hidden;
content: "";
display: table;
}
.main_block: after {
clear: both;
}
.inner_block {
display: inline-block;
float: left;
width: 50%;
}
.inner_block img {
width: 100%;
height: auto;
vertical-align: middle;
}
Here is the fiddle link: http://jsfiddle.net/Mohinder/vv9M6/1/
Is this what you are looking for?
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
