From dividing into three sections to splitting into two sections

Struggling to create a list of images and descriptions in sets of threes at larger widths, transitioning to twos at smaller widths? The breakdown is causing chaos. Need help achieving clean one-half columns. Appreciate any assistance!


          div.thirds {
            padding-bottom: 20px;
            padding: 50px;
            text-align: center;
            font-family: Gudea;
          }
          
          div.button1 {
            width:90px;
            height:40px;
            margin-left: 38%;
          }

          div.one-third {
            width: 30%;
            float: left;
            margin-right: 5%;
            text-align: center;
            font-family: Gudea;
          }

          div.button2 {
            width:90px;
            height:40px;
            margin-left: 38%;
          }

          div.one-third-last {
            margin: 0;
            text-align: center;
            font-family: Gudea;
          }

          div.button3 {
            width:90px;
            height:40px;
            margin-left: 38%;
          }

          @media (maxwidth:900px;)
          div.
          .one-third { width: 47.5%; }

          div.one-third-second {
            margin: 0;
          }

          div.one-third-last {
            clear: both;
            float: none;
            width: auto;
            padding: 20px 0 0 0;

          div.one-third {
            width: 47.5%;
          }

          div.one-third-second {
            margin: 0;
          }

          div.one-third-last {
            clear: both;
            float: none;
            width: auto;
            padding: 20px 0 0 0;
          }
        
      

          <div class="thirds clearfix">
          ...
          // Inserted content here.
          ...      
          </div>

htmlcssimage

Answer №1

One common issue often arises from the confusion between mixing percentages and fixed values in web design. It's important to consider the total 100% available for styling elements. For instance, if a width is set to 48% with a fixed margin of 100px, problems can occur if that 100px exceeds the remaining 2% of space available. This can lead to layout inconsistencies and difficulties. Be mindful of these considerations when designing layouts.

Answer №2

Have you considered utilizing CSS Flex in your project? It could potentially simplify your layout management and reduce the frustrations that come with working with floats.

CSS

.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.item {
  width: 33%;
}
@media (max-width: 900px) {
  .item {
    width: 50%;
  }
}

HTML

<div class="flex wrap">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

You can customize the markup within each .item class to suit your needs. For a more detailed example, check out this JSFiddle.

Answer №3

Utilizing bootstrap is the ideal choice - with this setup, you can exhibit 2 rows of 3 divs on a medium to large viewport, and 3 rows of 2 divs on a small viewport. Remember that there are classes like col-lg for styling large screens and col-sm for in-between mobile (xs) and small screen (sm) sizes. The code within the divs has not been included, solely to illustrate the concept:

Click on the full-screen option below to witness how the divs shift position based on the viewport's width. Additionally, I've added borders to each and centered the text for clarity.

.container div{
  text-align:center;
  border:solid 1px #ddd}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</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

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

htmlcssflexboxresponsive

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

javascripthtmlcss

Use JavaScript to enclose elements that are siblings within a DIV

Can you help me convert the elements with class "a" into a div using JavaScript, while maintaining their order within their sibling elements? I've been struggling with the code below and would appreciate any assistance. const elementParent= documen ...

javascripthtmldom

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

I am a beginner with TinyMCE and I am working on integrating the editor into my Laravel project. So far, I have managed to get it up and running, but I am struggling with retrieving the content from the editor and passing it to the controller for database ...

phphtmlmysqllaraveltinymce

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

css

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Firstly, feel free to check out the JSFiddle example My task involves moving an image with the class "Full" after a div with the class "group-of-buttons" using JavaScript. Here is the snippet of HTML code: <img src="http://i.telegraph.co.uk/multimedia ...

javascriptjqueryhtmlcss

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

cssresponsive-design

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

Is there a CSS4 resolution for transitioning from 0 to auto?

I searched extensively for information on CSS4, but unfortunately I came up empty-handed. Back in the era of CSS3, a common challenge arose when it came to height transitions from 0 to auto without relying on JavaScript. The introduction of transitions sa ...

csscss-transitions

The ul element does not encompass all child elements in terms of size

I have been working on creating a tabbed navigation component using HTML, and my code looks like this: <ul class="nav"> <li class="selected">Selected Tab</li> <li><a href="#">Not-selected Tab</a></li> ...

htmlcss

Easy steps to dynamically add buttons to a div

I need help with a JavaScript problem. I have an array of text that generates buttons and I want to add these generated buttons to a specific div element instead of the body. <script> //let list = ["A","B","C"]; let list = JSON.p ...

javascripthtml

Is there a way to display the button only when the user is able to enter an email in the input field?

I have a form for users to update their profile and a button to delete their account. I want the delete account button to only be visible if the user enters their email. $(document).ready(function() { var user_email = $('input[name="emp_email"]&a ...

javascripthtmljquery

Invoking a static method within a cshtml document

I am currently working on implementing a clickable DIV within a vertical tab panel. My goal is to have a specific static method called when the DIV is clicked. Here is what I have done: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ...

javascripthtml.netrazor

A step-by-step guide to displaying a label component upon clicking an AjaxLink

How can I display data from a JSON file when an AjaxLink is clicked? The code I have implemented is not working, so I would appreciate any corrections or suggestions. Additionally, I am wondering if it's possible to add a label inside AjaxLink. Thank ...

javahtmlwicketwicket-6

What is the best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

htmlcss

Padding-left may cause text to not wrap correctly

Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...

htmlcss

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor