Utilizing CSS3 Columns to control the flow of elements and enforce breaks

Struggling to articulate my question, but I'll give it a shot :D

Let's talk about the images:

I'm having trouble explaining, I want to align the elements like in the first image, but all I'm getting is the second and third pictures. CSS :

.contents{
    background-color: rgb(57, 66, 100);
    border-radius:5px;
    overflow: hidden;
    display:inline-block;
    width:286px;
    margin: 5px 5px 5px 5px;
    float: right;
}

HTML :

<div class='contents'>
    <div class='title'>
        <span class='nxnsh'>a</span>
    </div>
    <div class='content'>

        <ul class='nlisty'>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
            <li><a href=''>as</a></li>
        </ul>

    </div>

</div>

Check it out on fiddle http://jsfiddle.net/Qaagv/ trying to eliminate the empty space between top row and bottom row

htmlcss

Answer №1

Using a fiddle would simplify this query by aiding in the understanding of your layout.

Could you transition to a format similar to this? http://jsfiddle.net/Y6Gfs/

This setup will establish a 3-column structure, with each column accommodating various elements (articles).

.column-wrapper {
  width:100%;    
}
.column {
  width:33%;
  float:left;
  display:inline-block;
}
.article {
  background-color:green;
  border: 2px solid pink;    
}

<div class="column-wrapper">
    <div class="column">
        <div class="article"> This is some content for 1</div>        
    </div>
    <div class="column">
        <div class="article"> Not much here</div>        
        <div class="article"> Some more text</div>                
    </div>
    <div class="column">
        <div class="article"> This lengthy 3-column layout will occupy most of the space </div>                
        <div class="article"> Who is Anne Hathaway anyway? </div>        
        <div class="article"> Final version </div>        
    </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

The HTML unit is unable to locate the form for unknown reasons. My suspicion is that it could be due to the presence of Angular

Struggling with using HTMLunit to login and upload a file. Successfully logged in but unable to locate the form, despite it being present on the HTML page. Here is the JAVA CODE snippet: public static void main(String[] args) { WebClient webClient = ...

javascriptjavahtmlangularjshtmlunit

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

javascriptcssangularthree.js

Arranging null values and numbers to imitate the behavior of the tabindex HTML attribute

Currently, I am facing a rather unusual issue with JavaScript sorting. As I delved into the complex world of sorting, I found myself in need of some guidance: My goal is to replicate the functionality of the tabindex HTML attribute, which alters the order ...

javascripthtmlgoogle-chromesortingtabindex

Determine the number of lines in a textarea, taking into account both manual

I have a textarea that I need to validate for input exceeding 6 rows. My JavaScript code works perfectly by checking for scrollbar presence, indicating more than 6 lines of input. However, how can I achieve the same validation using PHP in case JavaScript ...

phphtmlformsvalidationtextarea

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

javascriptjquerycsscolors

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

javascripthtmlcordova

Position the background of the container in the center and keep it

I am trying to create a fixed background header using the following CSS properties: header { margin: 0; padding: 0; width: 100%; height: 300px; display: block; background-image: url('...'); background-repeat: no-repea ...

htmlcssbackgroundfixed

Best approach for routing using express

My current project involves using Express to develop a small website. Here is the code snippet I am working with: var package_express = require('express'); var app = package_express(); app.get("/", function(req, res){ res.sendFile(__dirname ...

htmlnode.jsexpress

Getting the draggable events area from the database in fullCalendar: A step-by-step guide

Currently, I am in the process of developing fullCalendar drag-and-drop events with a resource column. Initially, I hardcoded the draggable events area and now I am working on retrieving it from the database. Previously, the database had two tables - Resou ...

phphtmlfullcalendarfullcalendar-4

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

htmlcssbrowserpositioning

Unable to vertically scroll on a position fixed element

I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using m ...

htmlcssvue.jstailwind-css

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs

Create a div element that expands to occupy the remaining space of the screen's height

I am trying to adjust the min-height of content2 to be equal to the screen height minus the height of other divs. In the current HTML/CSS setup provided below, the resulting outcome exceeds the screen height. How can I achieve my desired effect? The foote ...

javascripthtmlcss

Issue with applying CSS properties of 'top' and 'left' to a dynamically created div using

After an extensive search on both the site and the internet, I have not had any luck so far. I am dealing with a series of dynamically-generated divs using JQuery, cloned from the original HTML source. While I can manipulate the positioning properties of ...

javascriptjquerycssdom

How can I connect the playback speed of an HTML5 video element with Vue.js?

Is it possible to bind the playbackRate of an HTML5 video element without using getElementById in Vue.js? //Example of directly manipulating playbackRate with plain javascript var vid = document.getElementById("myVideo"); vid.playbackRate = 0.5; ...

htmlvideovue.js

Parent div not properly adjusting its height

I am currently working on developing a fluid layout, however I have encountered a minor issue with the height of the container. The outer <div> (highlighted in yellow, ip_A-1) is not adjusting its height according to its child elements. You can view ...

css

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

Tips for keeping a dynamic height div in place without affecting surrounding elements

HTML: <div id="autocomplete" hidden></div> <input type = "button" id = "search" value = "Search"> The autocomplete div contains dynamically generated input tags created by jQuery. These input tags cause the button to be shifted down the ...

css

Discover the impact of images.google.com on enhancing your image gallery

I am currently working on creating a website that features an image gallery. When a user clicks on a thumbnail, I want a hidden div to slide out and display more information about the image, possibly even including a slideshow. After extensive searching o ...

jqueryhtmlcssimage-gallerygoogle-image-search