Is there a way to make floated elements align vertically instead of horizontally using CSS?

Struggling to create a web page layout with two columns, where one side holds the main content and the other displays additional information. However, the float property is causing the extra column to stack horizontally instead of vertically.

This is my current code:

.topicheader {
    padding: 2% 2%;
    float: left display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
}

.column.side {
    z-index: 1;
    width: 25%;
    float: right;
}

<div>
    <div class="def column side " ;>
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>

    <div class="def column side " ;>
        <strong class="topicheader">About</strong>
        <p style="color:white;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
</div>

Efforts to use the vertical-align property have proven futile. Desired outcome visualized

htmlcss

Answer №1

When you use the column property, the columns are stacked vertically. On the other hand, using the row property will display the columns side by side.

.container {
    display: flex;
    flex-direction: column; /* stacking vertically */
}
.column {
    height: 50vh; /* half of the viewport height */
}

/* example colors for demonstration */
.column:first-child {
    background-color: orange;
    color: blue;
}
.column:last-child {
    background-color: blue;
    color: orange;
}
<div class="container">
    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
    <div class="def column side">
        <strong class="topicheader">About</strong>
        <p style="color:white;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
</div>

Answer №2

To solve the issue, apply the clear: both; property.

.column.side{
    clear:both;
}

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

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

htmlcssframeworks

How can I align my logo on the website header separately from the menu tabs while keeping them on the same row?

Trying to vertically align a logo and headers' tabs in the same row can be quite challenging, especially when the logo is taller than the tabs. I've attempted different methods, including using padding to manually adjust the alignment, but it&apo ...

htmlcss

attaching a specific column to the right side of the browser window

Hey there! I have a challenge for you. How can I create a table with 4 columns, but only display 3 of them at all times even when resizing the browser? The 4th column should remain hidden, but I still need to be able to scroll to it if needed. Essentially, ...

javascriptjqueryhtml

How can I customize the color of the Title Component in Ant Design using Styled Components?

I am currently integrating Ant Design with styled components in my project. One of the components in my application is a NavBar that includes an H1 Component. H1.tsx import React from 'react'; import { Typography } from 'antd'; impor ...

cssreactjsantdstyled-components

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

What is the best way to insert a video as the background of a section in HTML Bootstrap while also reducing its opacity?

`Hello everyone! I'm diving into coding and creating my own website for the first time. I've managed to put together a decent site, but now I want to take it up a notch by adding video backgrounds that adjust automatically based on the device. B ...

htmlcssbootstrap-4

What is the best way to adjust the padding on the left and right of the Bootstrap navbar logo and menu items?

I am currently facing an issue with the alignment of the logo and menu on my website. They are currently aligned to the far edges of the screen, and I would like them to remain a set percentage distance away from the extremes, rather than an absolute dista ...

javascripthtmljquerycssbootstrap-4

Is it possible for me to determine the quantity of lines present in the text without any

I have a user-input field where individuals can enter information. The input can range from no information at all to as little as a single word or unlimited characters. However, my focus is on handling cases where the text exceeds three lines. To address ...

javascriptcssvuejs3

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

Introducing Bootstrap 5 with a sleek two-column layout that effortlessly allows text to wrap around captivating images

Struggling to find a solution for implementing two columns in a row? Look no further! In the left column, insert an image with classes md-3 or lg-4. In the right column, place a lengthy text using classes md-9 or lg-8. If you want the text to wrap around ...

cssflexboxrowcss-floatbootstrap-5

JavaScript: Retrieve the second value from a select dropdown menu

What is the method to retrieve and display the second value of "investortype" within "exploremax"? <script type="text/javascript> function $(id) { return document.getElementById(id); } function addCommas(nStr) // adds commas f ...

javascripthtmlsplit

Creating a user-friendly login feature within the navigation bar of an HTML webpage

As someone who is new to CSS, I am currently working on a welcome page that includes a login section in the navbar. While I have successfully created div sections for the entire page, I am seeking assistance with coding the navbar using CSS. The current C ...

htmlcss

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

javascriptcss

A guide on how to stop the loading animation and transition to a different slide using HTML and CSS

Check out this CSS code snippet @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); .loading { position: fixed; top: 0; left: 0; width: 100%; height: ...

htmlcss

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

Retrieving the elapsed time in seconds from a timer function and displaying it in my

I'm looking to transfer the minutes and seconds from my template's timer to my view. I've experimented with various approaches using an ajax.post request, but it hasn't quite worked as expected. Here is a snippet of my template code: ...

javascripthtmldjangodjango-views

"Utilizing Box elements, implementing linear gradients, styling with CSS, and

Currently, I am working on a project that involves using react JS and I am trying to find a solution for implementing linear gradient in multiple boxes. Specifically, I want to achieve the effect of having three identical boxes lined up next to each other. ...

javascriptcssreactjsmaterial-uibox

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

Is it possible for me to alter the script for my button's onclick

Is there a way to replicate all properties of a div when creating a clone using JavaScript code? I have an existing script that successfully creates a clone of a div when a button is pressed, but it does not copy the CSS properties. How can I ensure that t ...

javascriptjqueryhtmlcss