In a responsive layout, a floating div refuses to adhere to the left alignment

I am working on a dynamic list using ASP:REPEATER with floating divs aligned to the left. The current layout is as follows:

+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | +---------------------+
|                     | |                     | +---------------------+
+---------------------+ +---------------------+ |                     |
                                                |                     |
                                                |                     |
                                                |                     |
                                                +---------------------+
+---------------------- ++------------- -------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
+---------------------+ +---------------------+ +---------------------+

However, I want the 4th div to be displayed on its own line regardless of the height of the 3rd one. Due to the responsive design constraints, I cannot assign a specific height. The desired layout is shown below:

+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | +---------------------+
|                     | |                     | 
+---------------------+ +---------------------+ 
+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
+---------------------+ +---------------------+ +---------------------+
+---------------------+
|                     |
|                     |
|                     |
|                     |
+---------------------+

The CSS class for each div is as follows:

.wrapProducts
{
float: left; width: 30%;
margin: 0% 3% 5% 0%;
}

Does anyone have suggestions on how to achieve this layout?

Thank you in advance!

htmlcssresponsive-designcss-float

Answer №1

Using float won't work in this scenario, as it's causing the expected behavior of float. Check out this informative CSS-Tricks article for more details: Read here.. If you clear every third element, your layout may lose its responsiveness.

You have two options for achieving a responsive list layout:

One option is to utilize a table layout with table, tr, and td. Alternatively, you can use inline-block divs instead of floated divs.

Answer №2

Consider adding clear:both to the styling of your last div element.

If you exclude the final div, does your design still come together as intended?

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

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

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

htmlcss

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

Problem encountered in Firefox using Selenium: Invalid expression SyntaxError when dealing with Div tags in XPath

I encountered an error while attempting to automate a sample Qlikview web report using Selenium Browser: Firefox Xpath returned by FirePath: .//*[@id='58']/div[2]/div/div[1]/div[4]/div[1] Exception: **Exception**: Exception in thread "main ...

htmlfirefoxseleniumxpathrelative-path

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Adjust the color of static hyperlinks based on the background color

Is there a way to dynamically change the color of my fixed side links based on the background color when scrolling? I attempted to use CSS mixed-blend-mode: difference, but it does not provide the level of control I need. Therefore, I am looking to achieve ...

javascripthtmljquerycss

Selecting the label "for" will activate both the anchor tag and input tag simultaneously

It seems like I'm having trouble making this work, and it appears to not be possible. That's why I'm reaching out for help... Here is the CSS that is being used: label.btn { cursor:pointer; display:inline-block; } label.btn>inpu ...

css

Direct users according to their browser language (excluding php)

My site is going to have content in 3 languages, with French set as the default (fr). Here's how the structure of the website looks: Root directory (important note: no php files, just plain html) /fr/ Index.html About-us.html Contact.htm ...

html.htaccessredirect

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

javascripthtmlajaxmagento

What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors. ::-moz-selection { background: #fff; colo ...

htmlcssbackgroundselectionopacity

Transforming the content of a <div> into a variable in PHP

There is a website where you can place orders for various products. The titles of the products available to order are embedded in the HTML code like this: <div class="whatever"> Title </div> I am trying to extract this "title" and assi ...

phphtml

Customize Your Form Labels with Bootstrap: Changing Label Color in Forms

I am completely new to using bootstrap, particularly bootstrap 3. The goal I have is to change the color of labels such as "Name", "Email Address", "Phone Number" and "Message" from dark grey to white in the design shown below. https://i.sstatic.net/yDTto ...

htmlcsstwitter-bootstrap

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI. Here is the HTML code: <div class="wrapper"> <div class="toddler"></div> </div> And here is the script I have written: $.fn.slider = function () { ...

jqueryhtmlcss

How about showcasing bigger images in the main body of the page?

When it comes to using CSS sprites for images, the typical advice is to reserve it for smaller images like icons. Why should larger content images only be represented through <img> elements? Are there not benefits to utilizing spriting for all types ...

cssimagecss-sprites

Integrating XML API Requests Using HTML and JavaScript

When there is only one item in the XML document, I want to update my inner HTML with the result of an API call. I have managed to successfully make the API call work when there are multiple items in the XML document (thanks to W3). <!DOCTYPE html> ...

javascripthtml

A sleek and streamlined scrollspy that dynamically updates the active class exclusively for anchor tags

Can anyone help me with this coding problem? I'm currently working on a minimalistic scrollspy code that adds an active class when the content is offset.top. The code works fine, but I want to change the active class to apply to the "a" tag instead of ...

javascriptjqueryhtmldomscrollspy

Need help aligning a column class perfectly in bootstrap?

I'm currently learning Bootstrap 3 and I have some HTML code that looks like this: <ul class="row> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"></li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"></li> .. </ul ...

htmlcss

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Guide on positioning an SVG button within a form

I am attempting to design a form with two input fields and a button. Rather than using a plain text button, I prefer to utilize an SVG graphic for the button; however, it is not aligning correctly. Consider the following HTML and CSS: body { backg ...

htmlcssformssvg