What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images inside nested div elements but the code isn't functioning as expected. Can anyone provide guidance on how to properly achieve this? For reference, here is my code snippet: 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>
htmlcssimage

Answer №1

In my perspective, the ideal approach would be to apply a float: left property to the divs holding the images, followed by adding an additional div to clear the float afterwards.

Providing a JSFiddle link to your code will greatly enhance our ability to assist you in a more streamlined manner :)

Answer №2

Check out the following HTML code:

<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>

Also, here is the corresponding CSS style:

.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;
}

If you want to see it in action, visit this fiddle link: http://jsfiddle.net/Mohinder/vv9M6/1/

Does this meet your requirements?

Answer №3

Resolved the issue by applying the style display: inline-flex. Check out the Jsfiddle link below for reference:

http://jsfiddle.net/91dhG63k/

<!DOCTYPE html>
<html>
    <body>
        <div style="max-width: 900px; border:2px black solid">
            <div style="height: auto; border:1px green solid">
                <img src=http://i.imgur.com/ZYt4bDa.jpg />
            </div>
            <div style="height: auto; border:1px blue solid">
                <img src=http://i.imgur.com/pUEZlBC.jpg />
            </div>
        </div>
    </body>
img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}
div {
    display: inline-flex;
}

Answer №4

<!DOCTYPE html>
<html>
<head>
<style>
img {
     max-width: 100%;
     height: auto;
     width: auto\9; /* ie8 */
    }
div {
 display: inline-block;
 white-space: nowrap;
}
.img1,.img2{
      width:50%;
}
</style>
</head>
<body>

<div style="max-width: 800px; border:2px black solid">

 <div class="img1" style="height: auto; border:1px green solid"">
  <img src=http://i.imgur.com/Xt6vUQD.jpg>
 </div>

 <div class="img2" style="height: auto; border:1px blue solid"">
  <img src=http://i.imgur.com/BqFMNlq.jpg >
 </div>

</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a side navigation bar with 100 tabs using Angular 4?

I am new to learning AngularJS and could use some guidance. Currently, I am working on an Angular 4 SPA project that consists of a sidebar with 100 tabs, each containing different content. Here is an image of the sidebar. I have tried a simple approach by ...

htmlangularsingle-page-applicationangular-routing

The combination of Backbone.js and underscore.js is causing disorganized HTML code

When it comes to creating HTML elements, I typically use a combination of backbone.js and underscore.js. Here is an example snippet from my usual workflow: _.template($('#html-container').html(), this.model.toJSON()); I then append this code wh ...

jqueryhtmlbackbone.jsunderscore.jstemplating

Exploring the mechanics behind jQuery selectors

Currently, I'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...

jqueryhtml

What is the best way to create an answer label box that validates your response?

I am looking to design a question box label that resembles a search box. In this unique setup, users will have the option to input their answer into the question label. For example, if the user types 'kfuffle' as the answer, they will automatical ...

javascripthtml

Adjusting the height of a Vue component to 100% triggers a change in height whenever a re-render occurs

In my Vue component, there is a class called "tab-body-wrapper" that serves the purpose of displaying the "slot" for the active tab. However, I encountered an issue while troubleshooting where the height of the ".tab-body-wrapper" component reduces during ...

javascripthtmlcssvue.jsvue-component

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

javascriptjqueryhtmlinputtwitter-bootstrap-3

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

I recently encountered a situation with my Typescript/React solution where I defined a property as a number and set the input type to "number", but when the state value was placed in an input field, it would change to a string unless properly handled. In ...

javascripthtmlreactjstypescripthtml-input

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to read an image from my server using Ajax and then display it on Canvas? I am aware that this can be achieved by using normal image tags and canvas draw methods, as shown below: <img id="myImage" src="./ColorTable.PNG" style="display:n ...

javascriptjqueryajaxhtmlcanvas

In search of a render function that can effectively apply styles to HTML strings using React JS

I have been struggling to convert the result field value, including HTML attributes string, into respective styles for one column in my antd table. Below is the string I am trying to convert: The exhaust air requirements for fume hoods will be based on m ...

javascripthtmlreactjsecmascript-6antd

CSS does not have the capability to style child elements

Having trouble changing the text for child elements when applying CSS classes to parent elements. Is there a specific reason why this is happening? Take a look at my current code: <Box //not affecting all child elements ...

cssreactjsmaterial-ui

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop

What is the best way to apply maximum height to an element using CSS?

Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...

htmlcsstwitter-bootstrap

Tips for defining boundaries for position absolute elements using JavaScript

Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...

javascripthtmlcssresize

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

Alteration in relational shift of division placement

My webpage is divided into three sections with the following proportions: 15% - 65% - 20% In the right section, there is a div with the ID alchemy. I want to set the height of this div using <div style="height:150px;">. However, when I set the heig ...

jquerycss

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Modifying a CSS property with jQuery

If I have the following HTML, how can I dynamically adjust the width of all "thinger" divs? ... <div class="thinger">...</div> <div class="thinger">...</div> <div class="thinger">...</div> ... One way to do this is usi ...

javascriptjquerycss

The Twitter quote button refuses to function properly if there happens to be a pesky semicolon present in the quote

I have been working on setting up a Twitter share quote button, and have successfully done so with my other quotes. However, I am facing an issue with a quote that includes a semicolon. <a href="http://twitter.com/home/?status=Don\'t talk a ...

htmltwitter

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage