How to effectively position a div in CSS into two columns

I am currently facing an issue with positioning a div when one post contains a lot of text. The div seems to be expanding to accommodate the extra text, causing layout problems. You can view my code here.

HTML

<div class="container">
   <div>DIV 1 Sample text</div>
   <div> DIV 2 Sample text Sample text Sample text</div>
   <div> DIV 3 Sample text Sample text Sample text</div>
   <div> DIV 4</div>    
</div>

CSS:

.container {
    width:400px;
}

.container div {
    float:left;
    width:180px;
    background:red;
    margin:2px;
}
htmlcss

Answer №1

Combine the two left divs into a single div, and separate the two right divs into another div


<div class="container">
    <div class="left">
        <div>DIV 1 Sample text</div>
        <div> DIV 2 Sample text Sample text Sample 
            text</div>
    </div>
    <div class="right">
        <div> DIV 3 Sample text Sample text Sample 
            text</div>
        <div> DIV 4</div> 
    </div>   
</div>

Answer №2

<div class="wrapper">
    <div class="section">
   <div>Section 1 Lorem ipsum dolor sit amet</div>
   <div> Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="section">
    <div> Section 2 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
    <div> Section 4 Ut enim ad minim veniam</div> </div>   
    </div>

css should look like this:

.wrapper {
  width:400px;
}

.wrapper .section {
  float:left;
  width:180px;
  background:red;
  margin:2px;
}

Answer №3

This method utilizes a masonry layout approach.

It suggests using salvattore (although it has not been tested)

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

CSS

#grid[data-columns]::before {
    content: '2 .column.size-1of2';
}

.column { float: left; }
.size-1of2 { width: 50%; }

For more information on achieving a masonry layout, visit

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

Display a small icon within a checkbox input element inside a label

I have a customized input checkbox that looks like a button, but I want to add a small info icon in the lower right corner using a glyphicon. Currently, this is what I have: <div class="col-sm-4"> <label class ...

htmltwitter-bootstrapbootstrap-4glyphicons

Minimize the gap between two rows in an HTML table

I am working with a table that has multiple rows, specifically five. My goal is to decrease the space between the third and fourth rows. Here is the code snippet: <table> <tr> <td>First Row</td> <td>1< ...

htmlcsshtml-table

The designation is being acknowledged as a <div>

I am facing an issue with a div structure that contains a label and 4 child divs. My goal is to apply CSS and jQuery effects to only the child divs, excluding the label. To achieve this, I implemented the following code: HTML: <div class="score row-fl ...

javascriptjqueryhtmlcss

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

I'm trying to create a navbar link that will take me directly to a specific section of a page, but I'm having trouble getting it to work. Here's what I've tried: <a href="home#id" class="nav-link text on-hover"></a> Where ...

htmlcssangular

"Slice" the text in HTML

In my HTML code, I utilize a smarty variable; <div class="ty-blog__date">{$subpage.timestamp|date_format:"`$settings.Appearance.date_format`"}</div> {$subpage.timestamp|date_format:"$settings.Appearance.date_format"} When compiled, the dat ...

htmlsmarty

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

javascriptcssdom-eventsjavascript-objects

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

htmlcss

prepend a string to the start of ng-model

I am looking to enhance my ng-model variable by adding a specific string to it. This ng-model is being used for filtering data, specifically for elements that begin with the term "template". By adding this string to the ng-model, I hope to improve my searc ...

htmlangularjsangular-ngmodel

Continual running of a jquery command

Here is a snippet of jQuery code that may need some clarification. In this code, when the element with ID 'box1' is clicked, it triggers an event that directs to a modal dialog where there is a class called 'colors'. The issue here is t ...

javascriptjqueryhtmlcss

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

phphtmlcsswordpress

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

The labels in the left column of the form are initially sized correctly, but shrink when there is not enough room. However, there's a discrepancy in label size between rows with 2 items and rows with 3 items. body { font-family: Arial; font-siz ...

htmlcssflexbox

Why Jquery's nth-child selection and conditional formatting are failing to work

I am working with a table and need to format specific data fields based on their content. For instance, any field less than 95% should be highlighted in red. Below is the jQuery code I am using: $(function(){ $('#ConditionalTable td:nth-child(2n ...

javascriptjqueryhtmlcss

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

htmlcss3d

Why is the placement of PHP code (for file uploads) in relation to HTML code important?

I am in the process of learning PHP. Could someone please provide an explanation for why this issue is occurring? I find myself extremely puzzled and struggling to comprehend even the smallest detail. I'm also interested in gaining a clear grasp of ho ...

phphtmlposition

Styling and scripting with CSS and jQuery in an external JavaScript file

Is it possible to add the jquery library from "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" into an external .js file? And how can a .css file be included in a .js file? ...

javascriptjquerycss

How can you get the selected option from a drop-down menu using JavaScript without using JQuery?

UPDATE: JSFiddle Link I'm facing some challenges with this task. I'm trying to keep my code clean without overusing unnecessary IDs or classes. The issue lies with a drop-down menu that offers speed options for displaying words in real-time on ...

javascripthtmlmenuelementintervals

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

What is the reason for requiring a style to be set instead of using a class?

Trying to implement the footer staying at the bottom of my website like in this example. You can view my site here. The method is successful, however, I am required to apply the style style="min-height: 100vh;" directly to the body element inste ...

cssbootstrap-4footer

Can two div elements be positioned next to each other without relying on CSS float?

Every time I try to use CSS float to align two elements next to each other on a webpage, IE and Firefox always throw unexpected surprises my way. Is there an alternative method to position two divs side by side on a website without relying on CSS float? ...

htmlcsslayout