``Can you provide steps on arranging two divs in a side by side layout

I need assistance with aligning two divs next to each other, both containing images. The goal is for the divs to remain side by side and for the images to automatically resize based on the screen size. When the screen size is reduced, I want the images to re-position themselves below one another. What would be the appropriate CSS code for the following HTML structure?

<div class="container">
  <div class="wrapper">
    <div class="left">
      <img src="img1.png" />
    </div>
    <div class="right">
      <img src="img2.png" />
    </div>
  </div>
</div>
htmlcss

Answer №1

You can utilize the CSS property float to position elements on either side.

.container {
  width: 100%;
}
.left, .right {
  width: 50%;
  float: left;
}
<div class="container">
  <div class="left"><img src='http://placehold.it/350x150'/></div>
  <div class="right"><img src='http://placehold.it/350x150'/></div>
</div>

Update: Another method is using Flex-Box.

.container {
   width: 100vw;
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
   align-content: space-around;
 }

 .container > img {
   align-self: auto;
   margin: 4px;
 }
<div class="container">
  <img src='http://placehold.it/350x150'/>
  <img src='http://placehold.it/350x150'/>
</div>

Answer №2

Consider utilizing the bootstrap grid system for better layout structure. Here's an example:

<div class="col-sm-12">
    <div class="col-sm-6">
        <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
    </div>
    <div class="col-sm-6">
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">      
    </div>
</div>

Check out the demo here

Answer №3

<!--
  Utilizing CSS Flexbox to arrange images in a horizontal row.
  By setting 'display: flex' on the parent <div>, child <div>s are aligned horizontally.
  Each <div> occupies equal space with 'flex: 1'.

  Images span full width due to 'width: 100%' applied to them.
-->

<div style="display: flex;">
  <div style="flex: 1;">
    <h2>Left</h2>
    <img src="https://picsum.photos/id/16/2500/1667" alt="Left Image" style="width: 100%;" />
  </div>
  <div style="flex: 1;">
    <h2>Right</h2>
    <img src="https://picsum.photos/id/17/2500/1667" alt="Right Image" style="width: 100%;" />
  </div>
</div>

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

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

phpjavascriptjqueryhtmlajax

Which is better: triggering mouseleave from inside or outside of mouseenter event

As I delve into the basics of jQuery, I stumbled upon mouseenter and mouseleave actions. The question that arose in my mind is: where should I place the mouseleave action? Which approach is more correct and reliable? $(document).ready(function(){ $(&a ...

jqueryhtmlperformance

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

How can I prevent the content on my page from adding padding to the body of the page?

I'm working on designing a simple interface similar to Slack. However, I'm facing an issue where the left navigation is creating some padding from the body, even though I have set the padding and margin to zero. .app { display: flex; flex- ...

css

Showing a DIV container upon hovering over a different element

Having trouble with a hidden div container not displaying properly upon hovering over a visible div container. When d1 is hovered over, d2 appears but with a blinking effect. Here is my code: Note: I want d1 to remain visible and use d2 for displaying te ...

htmlcss

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

javascripthtml

Filtering input that is compatible with Firefox

Attempting to restrict certain special characters (excluding "_" and "-") from being used in a text input field has been a bit of a challenge. I initially tried using regex filtering by pattern, but it didn't work as expected. Then I turned to dynami ...

javascriptjqueryhtmlfirefox

The current situation is not effective; it is causing an error saying "Uncaught TypeError: Cannot read property 'substring' of undefined"

Encountering an error "Uncaught TypeError: Cannot read property 'substring' of undefined" while debugging in Chrome Inspector, with the following code: <script type="text/javascript"> $(function countComments() { var mcount = '/ ...

javascriptjqueryhtmljsonsquarespace

MUI component with a stylish gradient border

I'm struggling to locate the alternative for the border-image-source in CSS My objective is to create a button component with a gradient border ...

cssreactjsmaterial-uijssmakestyles

Dynamic transition when selecting a navigation bar link in Bootstrap

Check out my website here: On my webpage, I have 3 navigation links which are: Who We Are What We Do Contact Us I have set up the "a href" tag to link to each section of the page when clicked. My query is, how can I create a sliding effect when clicki ...

htmlcsstwitter-bootstrapbootstrap-4

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

Emphasizes the P tag by incorporating forward and backward navigation options

My goal is to enable users to navigate up and down a list by pressing the up and down arrow keys. For example, if "roma" is currently highlighted, I want it to change to "milan" when the user presses the down arrow key. Here is the HTML code I am working w ...

javascripthtmlcss

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

javascripthtmlangulartypescript

What steps should be taken to incorporate that dynamic sliding element (like a sliding screen paper) on the webpage?

When hovering over the leftmost part of the homepage at www.techants.com, a box shifts to the foreground. I examined the code and noticed a reference to something called screen paper. Does anyone know which script is being used for this effect? How can I ...

phpjavascripthtmlcss

Increase visibility, decrease visibility by utilizing ng-hide/ng-show and functions

As I implement the show more/show less feature, I am uncertain if achieving a smooth effect is feasible. However, I believe it's worth reaching out to this community for some creative ideas on how to make it possible. I have a list of dynamic links w ...

javascripthtmlcssangularjs

Ensure that the responsive SVG image remains centered even when resizing

I have been attempting to center crop the responsive SVG image while resizing. Even though I used preserveAspectRatio="xMidYMax slice", the image width does not stay consistent with my screen size. body{ margin:0;padding:0; } .wrapper { position: re ...

csshtmlsvgresponsiveness

What is the best way to define my background image using markup language?

I'm facing a challenge with some code that I didn't write which includes a background-image. While I want to maintain the identical appearance, I prefer to set the image in my markup rather than CSS. However, I'm unsure of how to do this. T ...

cssbootstrap-4background-image

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml