The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS.

<div id="container" style="width: 100%; margin: 0 auto;">

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

</div>

I have attempted adjusting the widths of the left and right divs to 42% so they appear next to each other, but this causes them to be compressed when viewed on smaller devices. I want them to expand to full width when they collapse into a single column on mobile devices.

csshtml

Answer №1

If you have set a goal with a width of 42%, it is likely that all the divs have margins and/or padding applied. The total horizontal dimension of an element includes its width, padding, and margin. So, when setting a width of 50%, adding padding and margin will make it impossible to fit two divs in one line. To resolve this issue, consider using the following code:

<div class="block" style="float: left; width:50%; margin: 0; padding: 0;">left div</div>
<div class="block" style="float: left; width:50%; margin: 0; padding: 0;">right div</div>

By implementing this solution for all your divs, you should be able to achieve the desired layout. Additionally, if you wish to switch to a one-column layout at a specific resolution, you can use media queries. Here is an example:

<style>
@media only screen and (max-width: 360px) {
    div.block {
        width: 100%;
    }
}
</style>

The value specified in max-width will determine when the layout changes, depending on the device being targeted. For reference, here are some common resolutions for popular mobile devices:

  • iPhone (up to 5s) portrait - 320px
  • iPhone (up to 4s) landscape - 470px
  • iPhone 5/5s landscape - 560px
  • Samsung Galaxy S3 portrait - 360px
  • Samsung Galaxy S3 landscape - 640px
  • tablet portrait (most models) - 760px
  • tablet landscape (most models) - 960px

Answer №2

Link to Fiddle

.block{
    float: left; width:50%; //Modified to 50%
    border: 0px;  //Changed to 0px
}

.left{
    text-align: left;
}

.right{
    text-align: right;
}

HTML:

<div id="container" style="width: 100%; margin: 0 auto;">
    <div class="block right">left div</div>
    <div class="block left">right div</div>
    <div class="block right">left div</div>
    <div class="block left">right div</div>
    <div class="block right">left div</div>
    <div class="block left">right div</div>
</div>

Answer №3

Check out this fiddle
Are the divs aligned next to each other?
It's possible that they're inheriting some conflicting CSS properties from their parent elements, such as margins or paddings.
You could try resetting them with margin: 0; padding: 0;

If you want them to be full width on smaller screens, consider using media queries
For example: 

@media screen and (max-width: 600px) {
      .block {
          width: 100%;
      }
}

I hope this information is helpful.

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 my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

htmlcss

The Bootstrap 4 alignment class for centering rows is not functioning as expected

<div class="row align-items-center remember"> <input type="checkbox" class="form-control" checked>Remember Me </div> <div class="row align-items-center"> <input type=& ...

htmlbootstrap-4

Emphasize specific letters in a word by making them bold, according to the user

In my app, there is a search feature that filters data based on user input and displays a list of matching results. I am trying to make the text that was searched by the user appear bold in the filtered data. For example, if the user searches 'Jo&apos ...

javascripthtmlcssreactjs

Can you explain how to incorporate a node module script into a React.js project?

I have encountered an issue where the element works perfectly fine when using an external node module, but fails to function properly when using a locally downloaded node module. Unfortunately, I am unable to identify the root cause of this problem. You c ...

javascripthtmlcssreactjstypescript

Conflict between jquery and hoverIntent libraries

I've encountered an issue with a website that was functioning properly until we added a new form to a specific page. The form, created by another person, utilizes javascript/jQuery for processing. Since adding this form, it has caused the majority of ...

javascriptjqueryhtmlwordpress

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

@media (min-width: 992px) and (max-width: 1140px) { .mr-1024-none { margin-right: 0px !important; } .mt-1024 { margin-top: 1rem !important; } .d-1024-none { display: none !important; } } Utilizing the ...

javascriptcss

Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content. <ul class=&qu ...

htmlcssbootstrap-4

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

htmlcsssubmenu

utilizing the value within the useState function, however, when attempting to utilize it within this.state, the tab switching feature fails

I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...

javascripthtmlcssreactjsredux

Using Ajax to update multiple text field rows with unique values

I have a question regarding utilizing Ajax to update the second text field based on the input from the first text field. I am looking to create multiple rows using a for loop, with each row having its own set of values. HTML <form style="text-align:c ...

phpjavascripthtmlajax

What is the process for converting HTML to RTF using Java programming language?

When working with the basic API of JAVA using RTFEditorKit and HTMLEditorKit, I encountered a limitation where certain tags like <br/> and <table> were not recognized. In my search for better solutions to convert HTML to RTF, I came across two ...

javahtmlrtf

Guidelines for showcasing a map on my website with the option for users to select a specific country

Is there a method to showcase a global map on my site and let the user select a country to receive relevant information? I am aware of embedding Google Maps, however, it includes unnecessary controls like zooming which I prefer not to inconvenience the us ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

I am encountering an issue where the key is not located in the response array in PHP, causing my JavaScript chart to remain

Hey there! I'm currently working on a school project and could really use some assistance. The task at hand involves creating a web interface that can interact with an endpoint in order to: - Authenticate a registered user to retrieve an authenticati ...

javascriptphphtmlhighcharts

Having difficulty rendering JSON data on an HTML webpage

Currently, I am working on an API App that utilizes the Foursquare API. With the help of my getRequest function, I am able to obtain results in JSON format, which are then displayed in my console.log. However, the challenge lies in parsing the data from J ...

javascriptjqueryhtmljson

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

javascripthtmlcssreactjsstate

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

How can a JQuery function be used with SVG to trigger a second animation immediately after the first animation is finished?

For the handwriting effect animation, I utilized the animation-delay technique by dividing the object wherever it intersected, drawing paths, and converting them into clipping masks. This involved breaking the letter "W" into four parts, creating different ...

htmljquerycsssvgsvg-animate

Problem with Bootstrap 5 dropdown menu: Functional on main page, but failing on subpages

As a beginner with Bootstrap, I recently attempted to integrate a dropdown menu into my website by following the Bootstrap documentation (version 5.1) for guidance. While the dropdown menu functions correctly on the homepage, it fails to work properly on ...

htmlbootstrap-5

What are the proper steps to ensure images are displayed correctly on mobile devices?

https://i.sstatic.net/M68Ob.jpg https://i.sstatic.net/fPKXr.jpg Our background image is 1920x1080p and looks great on desktop browsers, but it's not displaying properly on mobile devices in either portrait or landscape mode. Is there a way to resolv ...

htmlcssresponsive-design