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

Get the value of an HTML element

Is there a way to retrieve the value of an HTML element using PHP or JavaScript, especially when the value is dynamically loaded from another source? I have tried using jQuery with the DOM ready event, but often encounter the issue where the element's ...

javascriptphpjqueryhtml

Reading JavaScript files using the HTML 5 File Reader

Currently, I am working on a feature that allows users to drag and drop a folder containing JavaScript files into an HTML5 page. Here is the code snippet for my implementation: $scope.files = []; //Establish dropzone var dropbox; dropbox = document.getEle ...

javascriptangularjshtmlfilereader

Mastering the Art of Line Breaks in WordPress

I am looking for a way to break a WordPress site title over two lines at a specific point in the text. Since the WordPress content filter 'wpautop' disables the ` ` tag (also known as ` ` or ` `), I'm wondering what the best alternative ...

htmlcsswordpresstexthref

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

javascriptjqueryhtml

Using array.map() in React does not display elements side by side within a grid container

I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...

javascripthtmlreactjsmaterial-ui

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

javascripthtmlcssreactjs

Format six images in a horizontal row for desktop and ensure they resize appropriately for mobile viewing

I am looking to arrange images of different sizes in rows depending on the device orientation. For desktop, I want 6 images with proper margins, 2 images in a line for portrait, and 4 images for landscape orientation. Any extra images should be placed in a ...

csssassbootstrap-4

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

As a newcomer to web development, I have stumbled upon a perplexing issue. In my usage of d3.js (specifically the script found here), I have been attempting to incorporate additional features. I modified my JavaScript code to include a simple <p> ele ...

javascripthtmld3.js

The ajax response is returning the entire page's html code instead of just the text content from the editor

I've been working with CKEditor and I'm using AJAX to send the editor's content via POST method. However, when I try to display the response in a div, the HTML for the entire page is being returned instead of just the editor's content. ...

javascriptphphtmlajaxckeditor

Employing a lexicon of hexadecimal color code values to harmonize CSS styles

I have a unique requirement where I need to utilize a dictionary of HTML color codes and then apply those colors as styles. It's an interesting challenge! Here is an example of how my color dictionary looks like: const colorCodes = { red: ...

javascripthtmlcssreactjs

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

javascripthtmlcss

What is the best way to access elements of a certain class that begin with a specific string?

Here's the scenario: I have a group of elements that each have multiple classes assigned to them. Take a look at this example: <input class="etape btn-info others"> <input class="etape btn-inverse others"> <input class="etape btn-dange ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

The code snippet below is from my frameset.jsp file: </head> <iframe width="100%" src="mail_frame.html"></iframe> <iframe width="105px" height="100%" src="sidenav.html" id="leftnav" name="leftnav" ></iframe> ...

htmlcss

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

I'm having trouble aligning the HTML table properly, as it seems to be misaligned. The issue I am facing is related to the inner loop (modification) which is a list inside of Revision (basically, Revision 'has a' modification list). Althoug ...

htmlangulartypescript

Exploring ways to cycle through an array of objects during a jQuery ajax request

When making a jQuery ajax call to iterate over an API response, I am encountering the issue of receiving undefined data for all elements. Can someone guide me on how to properly iterate through an array of objects in jQuery? I am new to handling iteration ...

javascripthtmljqueryajaxbootstrap-4

Tips on adjusting the body or HTML to fill the entire page

Currently, I am designing the homepage using the bootstrap Cover page template. The images displayed are just placeholders. While the site functions perfectly on desktop screens, resizing it to smaller sizes causes the grid layout to collapse into a single ...

htmlcssbootstrap-5

What is the best way to use jQuery to attach functions to every input element?

Imagine you have a set of HTML markup and CSS like this: #CSS .inputhelp_text { background: #000; color: #fff; } .nodisplay { display: none; } <input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname"& ...

jqueryhtmlcssfunctioneach

Floating CSS drop menu with added bottom margin

I have created a simple dropdown CSS menu positioned in the footer with an upwards direction. You can view it here: http://jsfiddle.net/RmTpc/11/ My issue is that I want the opened menu to have some bottom margin from the main list item ("Items"). However ...

htmlcssdrop-down-menu