Arrange the lines in a column with two on each side of the center column

Is there a way to align a column of divs like the image shown below, with two separate divs on either side of the main column?

Here is what I currently have:

<div id="waterfall">
<div class="fall" id="water1">Defaulter’s Initial Margin</div>
<div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div>
<div class="fall" id="water3">Clearing House Contribution $20 Million</div>
<div class="fall" id="water4">Guaranty Fund<br>Total Value XX Million</div>
<div class="fall" id="water5">Unfunded contributions - assessment</div>
<div class="fall" id="water6">Service Continuity Phase</div>
<div class="fall" id="water7">Service Closure</div>
</div>

And here is my CSS code:

.fall {
overflow:hidden;
margin: 0 auto 10px;
color:white;
text-align:center;
width: 33%;
padding: 10px;
text-transform:uppercase;

}
#water2:after {
    border-top: 80px solid #0099CC;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    bottom: 0px;
    content: "";
    position: absolute;
    left: 45%;
    margin-left: -21px;
    width: 0; 
    height: 0;
}
#water1 {background-color:#686868;}
#water2 {background-color:#797979;}
#water3 {background-color:#828282;}
#water4 {background-color:#8B8B8B;}
#water5 {background-color:#949494;}
#water6 {background-color:#9D9D9D;}
#water7 {background-color:#AFAFAF;}

Any help or guidance would be greatly appreciated. Thank you.

htmlcssmultiple-columns

Answer №1

To enhance the design, I inserted divs within the fall class div to display on the left or right side of the parent div.

This was achieved by using position: absolute, along with adding position: relative to the parent div: div.fall.

I also eliminated the overflow: hidden from the .fall divs. Check out the demonstration here: http://jsfiddle.net/srup9b59/5/ or view it in full screen here

html:

<div id="waterfall">
    <div class="fall" id="water1">Defaulter’s Initial Margin</div>
    <div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div>
    <div class="fall" id="water3">Clearing House Contribution $20 Million</div>
    <div class="fall" id="water4">Guaranty Fund
        <br>Total Value XX Million</div>
    <div class="fall" id="water5">Unfunded contributions - assessment
        <div class="test_left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div>
    </div>
    <div class="fall" id="water6">Service Continuity Phase
        <div class="test_right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div>
    </div>
    <div class="fall" id="water7">Service Closure</div>
</div>

css:

.fall {
    margin: 0 auto 10px;
    color:white;
    text-align:center;
    width: 33%;
    padding: 10px;
    text-transform:uppercase;
    color: red;
    position: relative;
}
#water2:after {
    border-top: 80px solid #0099CC;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    bottom: 0px;
    content:"";
    position: absolute;
    left: 45%;
    margin-left: -21px;
    width: 0;
    height: 0;
}
.test_left {
    border: 1px solid black;
    color: black;
    height: auto;
    left: -260px;
    position: absolute;
    text-align: left;
    width: 300px;
}
.test_right {
    border: 1px solid black;
    color: black;
    height: auto;
    right: -260px;
    position: absolute;
    text-align: left;
    width: 300px;
}

Answer №2

One way to simplify this task is by aligning the popout boxes of additional information with the top of the adjacent <div> instead of centering them vertically. To achieve this, you can place the <div class="popout"> within the .fall element. Ensure that .fall has a style of position: relative; so that you can easily position the extra content.

For a clear demonstration, check out this JS Fiddle: https://jsfiddle.net/L0s28c6s/

Vertical alignment can be challenging, especially in cases where you want the additional content (the .popout elements) to not disrupt the layout of the .fall elements.

An alternative, but less elegant approach would involve using JavaScript to position the popout elements. By determining the coordinates of the .fall item and adjusting for half of its height to find the vertical center, you can then calculate the positioning for the .popout element. However, I advise against this solution as using JavaScript for layout purposes can lead to inefficiencies and consume unnecessary resources.

Answer №3

Using HTML to Create a Waterfall Effect

<div id="waterfall">
   <div class="fall" id="water1">Defaulter’s Initial Margin</div>
   <div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div>
   <div class="fall" id="water3">Clearing House Contribution $20 Million</div>
   <div class="fall" id="water4">Guaranty Fund<br>Total Value XX Million</div>
   <div class="fall" id="water5">Unfunded contributions - assessment
       <div class="text-box" id="text-box-2">text text text text text text text 
                text text text text text text text text text text text text</div>
   </div>
   <div class="fall" id="water6">Service Continuity Phase
       <div class="text-box" id="text-box-1">text text text text text text 
                text text text text text text text text text text text text text</div>
   </div>
   <div class="fall" id="water7">Service Closure</div>
</div><!-- end #waterfall -->

Key points of the CSS styling:

  • The container #waterfall is set to have a height of 100% and relative positioning.
  • The individual waterfall sections with class .fall are styled with specific colors, widths, and center alignment.
  • Text boxes for additional information are positioned absolutely within the respective waterfall sections.
  • Pseudo-elements styled as arrows are added to indicate directional flow.

This code snippet showcases a visually appealing waterfall effect using HTML and CSS:

https://i.sstatic.net/6DzyM.png

Explore the interactive demo here: http://jsfiddle.net/wxzrn6sc/1/

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 jQuery "form-row" for dynamic input generation in Bootstrap is experiencing technical difficulties

When I click the Add Wings/Blocks button, dynamic fields are created using jQuery which are Bootstrap components. I want to arrange 3 fields from (left to right) in a single row. Although I have written code for it, the "form-row" is not arranging the fie ...

jqueryhtmlbootstrap-4

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

htmlangulartypescript

Twitter Bootstrap 3.3.5 navigation menu with a drop-down feature aligned to the right

I've been attempting to position the drop-down menu all the way to the right, following the search input field and submit button. I've tried using pull-right and navbar-right classes without success. Is there a method to accomplish this? <na ...

htmlcsstwitter-bootstrap-3

Disabling caching for Twitter Bootstrap modal

Check out this demo I created to test Bootstrap modal and JSON parsing. View the code here Clicking the "show" button loads JSON data, parses it, and displays it in a modal. However, the issue arises when clicking "show" again as the previous list is no ...

javascriptjqueryhtml

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can you explain why Firefox is cutting off circular png images at the bottom of this page: It's strange that IE 10 and Chrome don't have this issue with cropping the images. ...

cssimagefirefoxbrowsercross-browser

Creating a personalized data filtering system for tables in Angular 6

I recently wanted to enhance my Angular code with a custom table filter. After conducting a web search, I stumbled upon this informative blog post: The implementation worked quite effectively and here is the snippet of the pipe code: import { Pipe, PipeT ...

htmlangulartypescriptangular-pipe

Navigating the data returned by an AJAX call can be quite perplexing

Every time a link is clicked on the website located at , an AJAX request triggers to load the content automatically. Lately, I have been encountering a perplexing piece of code injected into my response data: <script> var _q = document.createEle ...

phpjavascripthtmlajax.htaccess

Trouble with recognizing nested functions when calling them in an onClick event

Encountering a `not defined` error on the console when attempting to call nested functions with an `onClick` event in an HTML page. After searching for solutions without success, I suspect it may be a scope or closure issue, but I am unsure of how to addre ...

javascripthtml

Adding color between lines in Three.js

I have two different sets of vertices. One set contains real vertices, and the other set contains the same vertices but with a y value of zero. I am trying to connect these vertices and fill them in but have not been successful so far. I have attempted to ...

javascripthtmlthree.js

Footer Section (navigation) bounces up when scrolling to the beginning of the page

I am currently developing a fully web-based app-style layout. One issue I'm facing is that the navigation menu jumps slightly when I use my S3 to auto-scroll to the top by dragging. However, if I scroll up manually without lifting my finger, this pro ...

javascripthtmlcss

What is the best way to transfer this data within a ReactJS application?

While using ReactJS with Bootstrap's carousel design, I came across this specific line: <div class="tns-carousel-inner" data-carousel-options="{&quot;mode&quot;: &quot;gallery&", &quot;responsive&&quo ...

htmlreactjsbootstrap-4carouselreact-bootstrap

Angular backslash is encoded

Experiencing the same issue as this individual: angularjs-slash-after-hashbang-gets-encoded The URL is getting encoded and not routing correctly, causing it to fall to the otherwise in my route config. I have not been able to identify the root cause yet, ...

javascripthtmlangularjsurl-rewriting

Customizing the appearance of individual columns in the Material-UI DataGrid

My goal is to center an IconButton within a DataGrid table, all of which are MUI components. Despite reading the documentation and trying various methods, I haven't achieved the desired result yet. In my latest attempt, I implemented the following: G ...

cssreactjsmaterial-uimui-datatable

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

javascriptangularjshtmlsortingcanvas

Creating a border for a checkbox using CSS

I need help with styling a checkbox using jQuery $("#reg_checkbox").css("border","thin solid red"); The border displays correctly in Internet Explorer, but not in Mozilla. How can I ensure browser compatibility for this styling? ...

jquerycssmozilla

Transforming a grid of radio buttons into a numerical representation or percentage

I am facing an issue with calculating the total value of radio button selections in three rows. Each row belongs to a specific group, and I want the value of each selection to appear in the last column. The first radio button in each row has a value of 2, ...

jqueryhtmljscript

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

javascripthtmlcssangularangular-material

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

javascripthtmlcsszurb-foundation