How can we design a CSS layout where elements are positioned fixed on the left but dynamically adjust to prevent overlap?

I'm currently working on creating a layout that features a list of labels positioned at fixed percentage intervals. However, I am facing difficulty as I want these labels to move down onto separate lines if the page width is reduced in order to prevent overlapping:

|        |<- 10%   |<-20%     |
label1   label2    label3

|    |    |    |
label1
     label2
          label3

Despite my attempts using floats, spacer divs, and spans, I have been unable to achieve this. I am starting to think that it might be impossible due to how the rendering works.

Do you know if there is a solution to this issue or what other steps I could take? You can find my cleaned up template on jsfiddle.

htmlcsscss-floatoverlapping

Answer №1

If you're looking to make a design change based on screen size, you'll need to use a media query. This involves setting specific breakpoints for when the design adjustments will take place. Unfortunately, there isn't an automatic way to handle this using CSS alone.

@media only screen and (max-width: 35em) {
    .d4 {margin-top: 1.5em;}
    .d5 {margin-top: 2.5em;}
}

For a visual demonstration, check out this example http://jsfiddle.net/9wQCm/

Answer №2

If you want to achieve a similar effect using only CSS, you would need to float them as shown in this example. However, if your goal is to make them all move downward simultaneously, I have not discovered a method to accomplish that yet.

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

Execute a PHP function using JavaScript/jQuery with AJAX requests

Hello everyone, I am reaching out for assistance with AJAX as I am still quite new to it. Despite the abundance of examples available, I find it challenging to grasp the concept. Specifically, I need help with my validation of a contact form using JavaScri ...

phpjavascriptjqueryhtmlajax

Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

cssreactjsreact-bootstrap

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

cssvue.jssvg

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

What is the best approach to addressing an HTML layout problem?

I am working on a three-column layout where the third column contains two div elements. The first div is fixed, while the second div has a minimum height of 50px. I want this second div to expand in height as its content grows, reaching the bottom of the t ...

htmlcsstablelayout

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

javascriptjquerycsspseudo-element

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Show the chosen value from the dropdown menu on all JSP pages

I have a header.jsp file containing a dropdown box labeled "Role". This header.jsp is designed to be included in all other JSP files using a directive. Once a user logs in, they are directed to a homepage where they must select a value from the dropdown ...

javascriptjqueryhtmlangularjsjsp

Error in Internet Explorer when using SyntaxHighlighter and jQuery - "Property 'slice' cannot be accessed: object is null or undefined"

I have a strong liking for SyntaxHighter - it presents code in a very stylish manner. However, I have encountered a frustrating JS error in IE7 and IE8 that is hindering me from using this wonderful plugin to its full potential. Let's run a test case ...

javascriptjqueryhtmlsyntaxhighlighterxregexp

Styling columns alternately with CSS - an even-odd approach

I'm having an issue with my html code structure. Here's how it looks: <article></article> <article></article> <article></article> <article></article> <article></article> <article> ...

htmlcsscss-selectors

Exploring ways to maximize the width of responsive images on a webpage

I am currently working on a website located at . The slider image dimensions are set to 800x400, but the height appears too large. I need assistance in making the slider images responsive while maintaining their full width without sacrificing height. Ple ...

htmlcssresponsive-design

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Guide to updating the value of a CSS seconds dynamically

let timerSeconds = 10; // This value will be retrieved from a database function StartCountDownTimer() { let timerStart = new Date(); let css_seconds = `${timerSeconds}s`; const css_root = document.querySelector(':root'); let cssVa ...

javascripthtmlcsscss-animations

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

Aligning Bootstrap Buttons

How do I create a gap between my Bootstrap4 button and the top of the table, while also aligning it to the edge of the table? <div class="container"> <div class="table-title"> <div class="row"> ...

htmlcssangularbootstrap-4

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

Greetings! I am currently learning how to implement AJAX with jQuery to load an HTML document into a div element within another HTML document. Here is the approach I am using: function pageload() { $.ajax({ url: 'Marker.aspx', ...

javascripthtmljquery

Setting up bootstrap for PHP: A step-by-step guide

Struggling with integrating PHP and Bootstrap? I recently attempted to do the same, but unfortunately, my website doesn't seem to recognize Bootstrap. Instead of the sleek Bootstrap design, it's displaying a simple HTML layout. Here's a snip ...

phphtmlcsstwitter-bootstrapbootstrap-5

The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...

javascriptjqueryhtmlcss

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Is it possible to append the .active class to a div upon clicking a button?

I'm using bootstrap's tab system to create a "set up your account" page. The steps are displayed at the top of the page above the tab-panes. When a user clicks on an option in step one, it loads the step two tab and adds the active class to the c ...

jqueryhtmlcsstwitter-bootstrap