Ways to create space between rows

Here is some code structure that I'm working with:

.col_1_6 {
    width: 70%;
    float: left;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    padding-bottom: 105px;
}
<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

I am trying to add a margin between the row-content elements by using padding-bottom: 105px, but it doesn't seem to be working as expected.

What is the best way to create a clean margin between these rows?

htmlcss

Answer №1

To fix the issue, include the following code:

.row-content::after {
  content: "";
  clear: both;
  display: table;
}


.col_1_6 {
    width: 70%;
    float: left;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    padding-bottom: 105px;
}
.row-content::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

Answer №2

If you find yourself struggling with elements floating inside a container, don't worry, it's a common issue that many face. The problem arises when the container collapses to the height of non-floated elements (if there are any). An effective solution is using the 'clearfix' hack, as suggested by Usman. To learn more about this technique and create a reusable .clearfix class, check out this informative article. By applying the clearfix class to containers, you can ensure they maintain their height even with floated elements inside.

Answer №3

Avoid using float:left with the class .col_1_6. Instead, consider removing the border from the row-content later.

To see a demonstration, you can check out the DEMO on JSFiddle.

<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
.col_1_6 {
    width: 70%;
}

.col_1_4 {
    width: 30%;
    float: left;
}

.row-content {
    clear:both;
    /*padding-bottom: 105px;*/
    border: 1px solid #c4c4c4;
    margin-bottom:50px;
}
</style>
</head>
<body>
<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

<div class="row-content">
    <div class="col_1_4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
    <div class="col_1_6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates aperiam sint nam ea rerum. Ullam dolor ratione repellat assumenda laboriosam rerum omnis expedita esse dolores totam reiciendis nihil voluptatem eos.</p>
    </div>
</div>

</body>
</html>

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

Creating a Design That Works Well on Both Desktop and Mobile Devices

I have created this design using CSS and Bootstrap. However, I am encountering an issue with responsiveness. Can someone assist me in making this design responsive? HTML: .ordering .spanone { position: absolute; width: 100px; left: 43%; right: ...

htmlcsstwitter-bootstrapresponsive-design

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

javascriptjqueryhtmlcssanimation

Utilizing SASS, JavaScript, and HTML for seamless development with Browser Sync for live syncing and

I've been on a quest to find a solution that covers the following requirements: Convert SASS to CSS Post-process CSS Minify CSS Move it to a different location Bundle all Javascript into one file Create compatibility for older browsers Tre ...

javascripthtmlcssnpmrollout

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

jqueryhtmlcss

Constructing a list without a specific order using data from various MySQL databases

I am currently in the process of constructing a menu that will display categories, subcategories, and tertiary categories sourced from three distinct tables within my database. Here is how the data is structured: TABLE A ------------------------ | ID | na ...

phphtmlmysqlwebhtml-lists

Design elements using CSS within the <th> tags

When working with HTML tables, the use of a <th> element allows for the implementation of a scope attribute. This attribute serves to indicate whether the header cell is associated with its subsequent column, row, or group. Is it feasible to leverage ...

htmlcsscss-selectorshtml-table

According to the W3C Markup Validation Service, using a <body> tag is prohibited

While verifying my website (https://www.slamgmt.com), an error message appeared: document type does not allow element "body" here The body tag is the sole tag within the HTML root tag aside from the head tag. I'm puzzled about why this validatio ...

htmlvalidationw3c

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

I am currently working on a coupon code field that needs to accept a specific set of coupon keys. Below is the code I have written for validation. If a user enters an invalid key at first, they receive an alert saying "Invalid Key." However, if they corr ...

javascriptjqueryhtmlarraysloops

Aligning Bandcamp and Reverbnation iframes and DIVs to the center

[edit 3] - I am facing some trouble with the display of this code on Chrome, Sea Monkey, and Firefox. How can I fix this issue? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> <title>Pissi ...

iframehtmlcoding-stylecenter

This code is only functional on JSFiddle platform

I encountered an issue with my code recently. It seems to only work properly when tested on jsfiddle, and I can't figure out why it's not functioning correctly on codepen or when run from local files. Why is this code specific to jsfiddle? When ...

javascriptjqueryhtmlcss

Why is my CSS causing a div with 100% width to be slightly taller than expected?

I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...

csshtmlwidth

Creating a Bootstrap layout with a fixed top navigation bar, sidebar, and footer

I have a webpage with four components. Top Navigation Sidebar Footer Main content My goal is to have the Top Navigation fixed at the top, the footer fixed at the bottom, and the sidebar to stick to the left with full height. To achieve this layout, I h ...

htmlcsstwitter-bootstrapbootstrap-4styles

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

javascripthtmlmaterialize

What is the best way to center the input on the page?

Does anyone know how to align the <input type="text"> in the center? I'm trying to create a login form but having trouble with positioning the input element. ...

htmlcss

Making jQuery work: Utilizing tag replacements

My current code is: this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) { return (tag === 'p') ? match : '<p>'; return (tag === '/p') ? match : '</p& ...

javascriptjqueryhtml

Differences in Cross-Browser Styling for ListView Item Templates

I'm following up on my previous query regarding ListView's ItemTemplate table styling. I am still working on achieving the desired look for the ItemTemplate: ______________________________________________ | |___________Title_______ ...

asp.nethtmlcsslistviewitem

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Changing images in vuejs

I am seeking to achieve a seamless transition between two images along with a corresponding legend. These images are sourced from an object-array collection. Since transitions operate only on single tags and components, I have devised a component to encap ...

javascriptcssimagevue.jstransition

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

htmlcss

implement a dropdown feature for a vertical menu with the help of Jquery

Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...

javascriptjqueryhtmlcssdrop-down-menu