Achieving side-by-side divs without using floats or position:absolute

I am currently seeking a solution to align divs next to each other without relying on floats or position:absolute. The divs will have fixed widths and may contain floated elements within them. This is for a content management system where users can drag and drop content elements to organize them. They don't necessarily have to be divs, but I haven't found another HTML tag that would be more suitable.

The ultimate goal is to create a CMS that allows users to arrange content elements by dragging them. Unfortunately, when using floats, if you try to stack divs vertically, they all shift down to accommodate the tallest div above, even if there's space for them to fit under another div. For instance, having three elements where two should be stacked on the left and one taller element on the right with a height in between the others.

Inline-block is not an option as it lacks support from Internet Explorer (though I wouldn't mind requiring Chrome Frame...), and it doesn't serve the purpose of this layout either.

htmlcsscontent-management-system

Answer №1

It's intriguing that dragging elements was brought up, yet the title explicitly excludes position:absolute as a potential solution. Many scripts rely on using position:absolute for dragging functionalities, so why avoid it for positioning elements side-by-side?

Answer №2

Are you working with a set number of columns, meaning elements are displayed horizontally next to each other? If so, one approach could be to use floated unordered lists for each column, with each element as an li item. When an element is dragged and dropped within the same ul, its position within that list changes. If dragged across different uls, it's removed from the original list and added to the new one in a similar arrangement. This is just an initial idea... further testing would be needed to see how it works.

Answer №3

When considering alternatives to common techniques like position:absolute, display: inline-block, and float, using a table might be the only option.

<table>
    <tr>
        <td><div id="div1">...content...</div></td>
        <td><div id="div2">...content...</div></td>
    </tr>
</table>

Another possibility could involve structuring the layout as follows:

<div id="container">
    <div id="div1">...content...</div>
    <div id="div2">...content...</div>
</div>

Accompanied by the following CSS styling:

#container {display: table; } 
#div1 {display: table-cell; width: 50%; /* other css */}
#div2 {display: table-cell; /* width: 50%; other css */}

While this solution may not be ideal for some due to the use of tables in non-tabular layouts, it provides an alternative approach.

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

Scaling divs proportionately using a container

I have numerous elements enclosed within a <div class="wrapper">. My aim is to resize this outer div and ensure that the inner elements scale proportionately along with it. For instance, when dealing with a group of SVGs, adjusting the transform pro ...

javascripthtmlcsssvgwrapper

Having difficulty retrieving the value of a form using javascript

I've been struggling to retrieve the value of a form using JavaScript, but for some reason it keeps coming up as undefined, almost as if the input doesn't exist. Here's the HTML snippet: %@ Language="VBScript" CodePage=65001 %> ... Th ...

javascripthtmlforms

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

Using GSAP to merge texts from left to right

I'm curious about the animation technique used by the developer to make his name come together from right to left. I'd love to try implementing it myself to improve my CSS skills. It looks like GSAP ScrollTrigger was involved in this animation, ...

cssanimationgsap

What is the best way to ensure a sidebar's height matches the height of the content in a two-column table using div elements?

Just finished setting up a 2-column layout with a content div, sidebar div, header, and footer. You can check out the live example here. Any tips on how to make the sidebar's height match the content height (like a 2-column table)? Utilizing jquery ...

csslayouthtml

Best Practices for Handling Form State in ReactJS with Redux

Currently in ReactJS + Redux, I am utilizing Material-UI's TextField for a form where users input their firstName, lastName, birthMonth, birthDay, and birthYear. The existing setup works but appears redundant, especially when handling the birth date f ...

javascripthtmlreduxreactjs

Display a grid layout containing 5 divs in each row, ensuring that all rows begin and end in the

I need to arrange 5 divs (tiles) on each row in a consistent manner. I attempted to accomplish this by checking for every 5th element and adding an empty div if the count is divisible by 5. However, this approach causes rows to start and end at different ...

htmlcss

Update a mySQL table using dynamic input from a table

I'm facing challenges updating a mysql database with a dynamic table that allows me to add or remove rows before submitting the form. While I can make it work with hardcoded values, I struggle when trying to update with a while loop. It just doesn&ap ...

phpmysqlhtml

Is it better to use enum rather than ul for inline lists within paragraphs in HTML5?

Reflecting on the passage below: So in the initial group, we merge these 3 codes: - AA - BB - CC with the following codes: - Aa - Ab - Ac to achieve the desired outcome. Is this paragraph semantically incorrect? If not, how should it be written in H ...

htmlsemantic-markup

Leveraging HTML Page Variables in Google Tag Manager for Enhanced Merchant Code Integration

I'm currently in the process of incorporating Google Merchant Code via GTM on a product checkout/thank you page. The Google Merchant code is : <script> window.renderOptIn = function() { window.gapi.load('surveyoptin', function() { ...

javascriptphphtmlmagentogoogle-tag-manager

What are the best situations to utilize bootstrap and when should you avoid it?

When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...

csssassbootstrap-5

What is the reason for attempting to use "gethostbyaddr" to convert an IP Address to a Hostname and finding that it does not function as expected

My attempt to convert an IP Address to a Hostname using "gethostbyaddr" is not working as expected. I am analyzing a log file called file.text to determine which pages users are frequenting the most or least. To achieve this, I am trying to extract sentenc ...

phphtmlmysqlcsssql

Is it possible to maintain a div consistently visible at the top while scrolling using CSS?

Is there a way to ensure that a div remains visible at the top of the page when scrolling without using jQuery, but only using CSS? ...

css

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

JQuery modal for creating vibrant and personalized color schemes

I have a basic jQuery modal code that uses grey as the default color. How can I customize this to create a colorful toolbox, for example changing the color from grey to blue? Also, how can I use this script for multiple dialogs, like setting #dialog1 to be ...

jqueryhtml

Is there a way for me to have an image smoothly ascend as the caption rises?

I have put together the following html snippet: http://jsfiddle.net/4gDMK/ Everything is working smoothly, but I am struggling to figure out how to simultaneously move both the captions and the image upwards so that the entire image is no longer visible. ...

jqueryhtmlcss

Looking to reload a div with a captcha in a contact form without the need to refresh the entire page

I have integrated a div tag into my contact form to contain the captcha elements. If the user is unable to read the captcha image, I want to provide them with an option to refresh that specific section without reloading the entire page. I have tried variou ...

javascriptjqueryhtml

How do I adjust the Bootstrap 4 column width to match the size of its content?

I am facing the following situation: [![enter image description here][1]][1] What I want is: Number 1: Adjust the column width to fit the content, in this case the image. Number 2: Resize the column width to accommodate the text "Title of Content" ...

htmlcssbootstrap-4

Unlimited icon carousel crafted with CSS

Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning. I am looking for a solution to ...

htmlcssinfinite-scroll