What are the best methods for creating a responsive div container?

Hello, I am having trouble with the responsiveness of my div. I want these two images to stack on top of each other when the window is resized. I have attached a screenshot to demonstrate exactly what I am trying to achieve. I can't seem to figure out what's wrong with my CSS code. I hope someone can help me.

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}
.women {
  position: relative;
  left: 100px;
}
.man {
  position: relative;
  left: 210px;
}
<div class="gender-selector">
  
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label>

  <label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

</div>

https://i.sstatic.net/THxEK.png

htmlcss

Answer №1

It seems like the issue you are facing is related to how you are positioning the images on your webpage. I haven't come across a label with elements other than text before, so I'm not sure if that is w3 compliant. However, the code provided in this fiddle should solve your problem.

.women {
  position: relative;
  left: 100px; // this might be causing the problem
}

Check out the demo here

If you reduce the size of the right panel where the HTML is displayed, you will be able to see the desired effect.

Best regards

Answer №2

If you're wondering how to style your <labels>, consider enclosing them in <div> tags and applying the following CSS:

.gender-selector div {
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.gender-selector div img {
  width: 100%;
  height: auto;
}

These style rules should get you pretty close to the desired result, but feel free to adjust the max width to suit your specific needs.

Answer №3

To achieve this layout, we can use a combination of CSS properties. In the example below, we have set the labels (with a blue border) to display side-by-side using display:inline-block. If the container width of .gender-selector (with a red border) is too narrow, the labels will stack on top of each other.

In the demonstration provided, the width of .gender-selector has been restricted to show the wrap effect. Expand the snippet to see the labels fit next to each other in full size.

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}

.gender-selector {
  border:1px solid red;
  max-width:60%; 
  min-width:220px;
  margin:auto;
  text-align:center;
}
.gender-selector label {
  display:inline-block;
  position:relative;
  border:1px solid blue;
}
.gender-selector label img {
  padding:40px;
}
<div class="gender-selector">
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label><!-- no whitespace here
--><label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

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

When the div is clicked, it changes color and then reverts back to its original color when another

I have encountered an issue where I need to differentiate the div I clicked on in order to avoid confusion, as the pop-up menu on my website will be identical with different links but the same buttons. I have been struggling to find a solution for quite so ...

javascriptjqueryhtmlcsswordpress

CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: ...

htmlcssangularsassionic2

Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design https://i.sstatic.net/u9SRM.png How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different scre ...

htmlcssfrontendline

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

javascripthtmlcss

Implementing jQuery in ASP.NET code-behind files

I am new to asp.net and trying to learn by experimenting with rendering aspx in only specific parts. I was able to make it work, but encountered an issue when trying to create a button, textbox, and label where the label would display the text from the tex ...

jqueryhtmlasp.net

Automatically Populate Text Field with the URL of the Current Page

I am hoping to automatically fill a hidden text field with the URL of the current page so that I can keep track of where form submissions are coming from. This simple solution will help me streamline my inquiry responses and save time. To clarify, upon lo ...

javascripthtmlcssformstextfield

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

Manipulate HTML Table to Obtain Value of First Column Cell When Another Cell is Clicked using Javascript

I have a PHP web application where I am retrieving data from MySql and displaying it in the HTML table below. <table id = "table" width="500px" cellpadding=2 celspacing=5 border=2 > <tr> <th>Subject Code</th> <th>Subje ...

javascriptphphtmlhtml-table

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

cssajaxsymfonymodal-dialogmaterialize

CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far. My main query is about incorporating two different colors for Likes (green) and Di ...

cssprogress-barrating

span element failed to trigger onload event

I'm encountering a basic issue with my code as a beginner. Below is the HTML snippet: <!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf8' /> <scrip ...

javascripthtml

Delete unnecessary css code

After years of working on a website, it has grown significantly in size. The CSS files have become quite messy and unclear. I need to figure out how to identify which parts of my extensive CSS file are not being utilized on my homepage so that I can safel ...

htmlcsscoding-style

The background image and svgs are not displayed on laravel localhost/public/index.php, but they appear when using "php artisan serve"

I've created a beautiful Laravel project on my PC. The welcome.blade.php file in the project has a background image located in the: public/images/ directory. To display the images, I've used the following CSS: html, body { color: #f4f6f7; ...

phpcsslaravellaravel-artisan

Displaying various results using a range slider

I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out. My goal is to have the text "590" display as 5.9 times the value ...

javascriptjqueryhtmlcss

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

htmlcss

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

htmlcssangulartypescriptangular2-template

Tips for customizing the appearance of a specific cell in the first column of a Material UI table

Currently, I am modifying the material ui table found in this codesandbox link. My goal is to adjust the style of the first column's cell in the table when it is selected to match the image provided below. https://i.sstatic.net/DGubN.png It seems lik ...

csshtml-tablematerial-ui

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

htmlnode.jsangular

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

javascripthtmlcssscroll