What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to collapse into a single column, they are currently displayed as 2 on top and 1 below.

How can I ensure that they are always displayed either all inline or all in one column, considering the following constraints:

  1. Avoid using media queries.
  2. The inner divs have fixed widths in pixels.

CSS:

.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}

.narrow {
    width: 200px;
}

.medium {
    width: 400px;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    display: inline-block;
    background-color: #FF0000;
    border-radius: 5px;
}

HTML:

<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

JS Fiddle: https://jsfiddle.net/5wLeggy4/1/

htmlcss

Answer №1

To achieve this layout without the need for media queries, you can utilize flexbox styling:

https://jsfiddle.net/9zCZM/

.container {
    display: flex;
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}

.narrow {
    width: 200px;
    flex-direction: column;
}

.medium {
    width: 400px;
    flex-direction: column;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    background-color: #FF0000;
    border-radius: 5px;
    flex-direction: row;
}
<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer №2

Consider using "display: block;" in place of "display:inline-block;".

Link to example on JSFiddle

Ensure your element class is structured as follows:

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    display: block;
    background-color: #FF0000;
    border-radius: 5px;

}

Answer №3

Here is the solution I have come up with: https://jsfiddle.net/5wLeggy4/6/

<div class="container wide">
    <div class="one">
      <div class="element"></div>
    </div>    
    <div class="two">
      <div class="element"></div>
      <div class="element"></div>
    </div>
</div>
<style>
.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}


.one {
  display:inline-block;
}
.two {
  width:70%;
  max-width:360px;
display:inline-block;
  }

.element {
    width: 100px;
    margin:20px;  
    padding: 20px;  
    display: inline-block;
    background-color: #FF0000;
    border-radius: 5px;
}
</style>

The adjustment made to the width of .two ensures that the elements do not drop down together, while maintaining a maximum width restriction.

Despite the slight overlap in rules creating a small gap where the elements can be displayed side by side, making sure the width of .two is exactly 360px allows for them to appear inline.

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

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss

Is there a way to create a 100% height effect using divs instead of tables exclusively with CSS?

click here to view the image ...

css

Attempting to utilize a Python web scraping tool to extract content from a webpage that undergoes regular text updates

I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...

javascriptpythonhtmlcss

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

I have implemented a JQuery plugin for dropdown menus that can be found at the following link: https://code.google.com/p/select-box/ Currently, I am facing an issue where the script only seems to work for the first dropdown menu out of 4. I am unsure abo ...

javascriptjqueryhtmldrop-down-menu

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

The Chrome Keyboard on Android seamlessly passes words to the next input field when the focus changes in JavaScript

When using two input fields, pressing the enter key on the first field in Chrome (49) on Android (6.0.1) carries over the last word typed to the new input due to the right-bottom button on the standard keyboard. Is there a way to prevent this behavior or a ...

javascriptandroidhtmlgoogle-chrome

The banner <div> appears in Chrome but is not visible in IE9

I'm facing an issue with a banner div under my navigation. It seems to show up in Google Chrome but doesn't appear in IE9. Below is the HTML and CSS code: HTML: <div class="content"> <div class="slide-banner"></div> ...

csshtmlinternet-explorer-9

Unable to attach the event listener for the 'onchange' event to a div nested within a ul element

Here is the HTML code I am working with: <ul> <li> <a href="#"> <div></div> Actions <div></div> </a> <ul> <li> <a> &l ...

jqueryhtmlhtml-listsbindonchange

Menu Items at the Center

I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...

csswordpressmenuhtml-listsnav

Having trouble showing Bootstrap Toasts on my website

I successfully implemented Toast functionality upon button click, but I am facing an issue where I have two buttons and I want a separate Toast to appear for each button click. How can I achieve this? Another problem I encountered is related to the docume ...

javascripthtmltwitter-bootstrapbootstrap-4toast

Why does my contact form display PHP code unexpectedly?

I've been following a YouTube tutorial to create a responsive single-page website using Bootstrap. The tutorial covered the front-end, but now I'm stuck on integrating a contact form. I added some PHP code I found online, but there seems to be an ...

phphtmltwitter-bootstrap

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

htmlangulartypescript

Having difficulty uploading files to my website [PHP]

I'm having trouble with a PHP tutorial I followed for uploading an image. Despite my best efforts, the upload always fails and I can't figure out why. I've rewritten the code multiple times but the problem persists. The goal of this code is ...

phphtml

Manipulating the content of h1 tag using Jquery when selecting from a dropdown menu

As I was exploring this Fiddle I stumbled upon, http://jsfiddle.net/JBjXN/ I've been working on a functionality where selecting an option from HTML <h1>Select a Show</h1> <select class="radio-line" id="radio-manager&quo ...

javascriptjqueryhtml

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

javascripthtmlcssdjangocodepen

Maintaining duplicate values in a JSON stringify operation: Tips for retention

Server responses are being received in JSON format, which may contain objects with duplicate keys. When displaying the results, I noticed that only the last value for duplicate keys was showing up. After investigating, I realized this was due to using the ...

javascripthtmljsonvue.js

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

htmlcss

Pages with embedded HTML code

Within the confines of locale/lang.json, there resides { "title": "Title", "image": "service-corporate_thumb-v2.jpg", "alt": "alt", "imageFooter": "Some caption %", "imageFooterCTA": "author", "imageFooterURL": "https://example.com/author", } ...

htmlvue.jstranslationnuxt.js

What is the best way to share dynamic content from a DIV or SPAN element on WhatsApp using jQuery?

I’ve been attempting to share the text content of a specific DIV on WhatsApp, but so far I haven't been successful. My goal is to only share a portion of the document (specifically the contents of showques). Below is the code snippet I've been ...

javascripthtmljqueryreactjswhatsapp

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

htmlcssnode.jsexpress