Unable to properly position an element with the correct margin

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


////////////* CSS reset end *////////////////



body{
    background: #fff;
  
}

h1,h2,h3,h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p,a {
      font-family: 'Open Sans', sans-serif;
}

header {
    background: #fff;
    padding: 20px 0;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1;
   border-bottom: 1px solid rgba(0,0,0,0.1);
}

*{
    box-sizing: border-box;
    outline: none;
}

header:after{
    content: "";
    display:table;
    clear:both;
}

.wrapper {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%; 
}

div#logo {
    background: url(img/logo.png) no-repeat;
    width: 79px;
    height: 28px;
    float: left;
}

header nav {
    float:right;
    
}

header nav li a {
    color:#606060;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size:12px;
    
}

header nav h2 {
    height: 0;
    text-indent: -10000px;
}

header nav li {
    float: left;
    margin-left: 22px;
    margin-top: 8px;
}

#main-banner {
    background: url(img/2.jpg) no-repeat center center ;
    background-size: cover;
    height: 80vh;
    text-align: center;  

}

.banner-overlay {
    text-align: center;
position: relative;
top: 50%;
margin: 0;
transform: translatey(-50%);
}

h1 {
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 72px;
    
}

.banner-overlay .after-welcome {
    color: #fff;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20%;
    font-family: 'Open Sans', sans-serif;
    
    
}

.btn {
/*    background: #bf8040;*/
background: linear-gradient(to bottom,  #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%); 
    color: #fff;
    display: block;
    padding: 25px 20px;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700; 
}


section {
    text-align: center;
    padding: 125px 0;
}

#gallery {
    background: #dfdfdf;
}

h2 {
   color:#282828;
    margin-top: 10px;
    font-size: 45px;
   
}

h3 {
    color:#777;
    font-weight: 400;
    font-size: 20px;
    margin-top:20px;
    margin-bottom:75px;
}


.projects {
    background: #fff;
}

section:after{
    content: "";
    display:table;
    clear:both;
}

.gallery-image {
    float: left;
    width: 33.333%;
    padding-left:1.5%;
    padding-right:1.5%;
    text-align: center; 

}

#gallery img{
    width: 100%;
    height: auto;       
}

.gallery-image a {
  display: block;
  background: white;
}

.img-text {
  background: white;
  padding: 20px;
}

.img-text p{
    font-size: 14px;
    color:#777;
    margin-top:5px;
}

.margin-top {
  margin-top: 20px;
}
 <main>
        <section id="gallery">
            <div class="wrapper">
                <h2>Our Gallery</h2>
                <h3>Lorem bizzle dolizzle sizzle amet</h3>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""><img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
              </div>
              
              <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
              
          </div>
       </section>

I'm attempting to introduce a <p> tag with a margin at the top to create more space between its content and the gallery items, but the current setup adds that margin on top of the images instead.

Do you have any suggestions for resolving this issue? It could potentially be related to a clearfix problem, although applying a clearfix hasn't yielded the desired results.

Check out the CodePen here

htmlcssmargin

Answer №1

Yes, the issue here is a clearfix problem caused by the three floated elements positioned above it. To resolve this, you can wrap those elements with the class .projects in a container and clear the floats.

Answer №2

To ensure proper alignment, insert a clear:both div just before the <p> tag.

<div style="clear: both;"></div>

Refer to the snippet below for verification:

Please see the CSS code snippet below: 

     
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
         HTML5 display-role reset for older browsers 
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        ////////////* CSS reset end *////////////////

        body{
            background: #fff;

        }

        h1,h2,h3,h4 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

        p,a {
            font-family: 'Open Sans', sans-serif;
        }

        header {
            background: #fff;
            padding: 20px 0;
            position: fixed;
            top:0;
            width:100%;
            z-index: 1;
           border-bottom: 1px solid rgba(0,0,0,0.1);
        }

        *{
            box-sizing: border-box;
            outline: none;
        }

        header:after{
            content: "";
            display:table;
            clear:both;
        }

        .wrapper {
            width: 96%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2%; 
        }

        div#logo {
            background: url(img/logo.png) no-repeat;
            width: 79px;
            height: 28px;
            float: left;
        }

        header nav {
            float:right;
            
        }

        header nav li a {
            color:#606060;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
            font-size:12px;
            
        }

        header nav h2 {
            height: 0;
            text-indent: -10000px;
        }

        header nav li {
            float: left;
            margin-left: 22px;
            margin-top: 8px;
        }

        #main-banner {
            background: url(img/2.jpg) no-repeat center center ;
            background-size: cover;
            height: 80vh;
            text-align: center;  

        }

        .banner-overlay {
            text-align: center;
            position: relative;
            top: 50%;
            margin: 0;
            transform: translatey(-50%);
        }

        h1 {
            margin-top: 20px;
            color: #fff;
            text-transform: uppercase;
            font-size: 72px;
            
        }

        .banner-overlay .after-welcome {
            color: #fff;
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 30px;
            padding: 0 20%;
            font-family: 'Open Sans', sans-serif;
            
            
        }

        .btn {
            /*    background: #bf8040;*/
            background: linear-gradient(to bottom,  #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%); 
            color: #fff;
            display: block;
            padding: 25px 20px;
            width: 220px;
            margin: 0 auto;
            text-decoration: none;
            font-size: 18px;
            border-radius: 5px;
            text-transform: uppercase;
            font-weight: 700; 
        }


        section {
            text-align: center;
            padding: 125px 0;
        }

        #gallery {
            background: #dfdfdf;
        }

        h2 {
            color:#282828;
            margin-top: 10px;
            font-size: 45px;
        
        }

        h3 {
            color:#777;
            font-weight: 400;
            font-size: 20px;
            margin-top:20px;
            margin-bottom:75px;
        }


        .projects {
            background: #fff;
        }

        section:after{
            content: "";
            display:table;
            clear:both;
        }

        .gallery-image {
            float: left;
            width: 33.333%;
            padding-left:1.5%;
            padding-right:1.5%;
            text-align: center; 

        }

        #gallery img{
            width: 100%;
            height: auto;       
        }

        .gallery-image a {
            display: block;
            background: white;
        }

        .img-text {
            background: white;
            padding: 20px;
        }

        .img-text p{
            font-size: 14px;
            color:#777;
            margin-top:5px;
        }

        .margin-top {
            margin-top: 20px;
        }
 <main>
        <section id="gallery">
            <div class="wrapper">
                <h2>Our Gallery</h2>
                <h3>Lorem bizzle dolizzle sizzle amet</h3>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""><img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="https://i.sstatic.net/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
              </div>
              <div style="clear: both;"></div>
              <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
              
          </div>
       </section>
</main>

Answer №3

Apply the style display: inline-block; to the paragraph.

Allow me to clarify:

p{
  display:block;
}

With this change, the margins for p will work and the sentence "Lorem bizzle dolizzle sizzle amet" after projects will be pushed down due to margin-top.

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

Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...

twitter-bootstrapcssbootstrap-4css-transitions

Issues with Drop Down CSS on Laravel Blade files

In my view, I have included various drop down menus such as https://i.sstatic.net/0UHgE.png Click here to access I am struggling to display a border bottom. I have attempted to manually define border-bottom in the CSS of those elements but have not been ...

htmlcss

What is the best way to display letter p when hovering over an image?

Even though the issue of overlapping has been addressed before, I am struggling to center the text on top of the image when hovered. I have experimented with z-index, relative and absolute positioning, but I'm still seeking assistance. .flex-conta ...

htmlcss

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Simply put, we are creating interactive content in Flash that we want to distribute through an iOS app either by in-app purchase or subscription. In our testing, we have found that Flash can produce standalone iOS apps that work well for our needs. Instea ...

iphoneflashioshtml

Exploring Vue's data binding with both familiar and mysterious input values

How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...

javascripthtmlvue.jsdata-binding

Text that is allowed to flow naturally with a narrow column width centered around an image that

Is there a way to prevent text columns from getting too narrow when an image is floated to the left? Typically, text flows around the image in a column of HTML content as expected. However, when the image is almost as wide as the column itself, the text e ...

htmlcsslayout

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

Class Div is visible only within the jQuery Tab

I have encountered a perplexing issue that has left me stumped. I recently added tabs using a jQuery plugin [Tabulous] and am in the process of transferring existing content into these tabs. However, I stumbled upon a strange problem while attempting to po ...

jqueryhtmlcss

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

javascriptjqueryhtmlcss

Is there a way for me to incorporate the code display format on StackOverflow?

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb I need to display a long line of code on a webpage without it wrapping into multiple lines like shown above. Is there a way to achieve this using only ...

htmlcss

The closing brackets in PHP substr() function are causing style issues

Here's the scenario: I entered a large amount of content in a text editor (WordPress). Now, I want to display this content on my homepage using PHP queries. In order to limit the content size to 100-200 characters, I used the substr() function i ...

javascriptphphtmlwordpress

How can the AJAX request be adjusted to ensure that the dependent drop-down is hidden when the page initially loads?

My current form includes a dependent drop-down feature. Right now, both the main drop-down and the dependent one are displayed when the page loads. If a "Work Area" without a "Station" is selected, then the station drop-down disappears. What I want to acc ...

htmldjangoajax

Verify that the audio is functioning properly with Selenium

I'm currently working on testing an HTML5 game and one of the things I need to verify is that the audio loads and starts properly. Is there a method to assess this through Selenium, or would it be more appropriate to handle this at the operating syst ...

htmlunit-testingaudioseleniumselenium-webdriver

Obtain data using a REST request from a webpage or web server

Is it possible to extract the last status value from a delivery courier's webpage by sending a tracking number request using PHP? I have found some helpful information, but I am unsure if it is possible to extract only specific values from the result ...

phphtmlrestapi

Resolve the issue of text overlapping on an image when zooming in

There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance.https://i.sstatic.net/oVlGN.png Here is the CSS code causing the ...

htmlcssangularbootstrap-4

React Download Button: Easy way to offer file downloads on

I am trying to create a download button for users to download zip files from Cloudinary using React. I have attempted different methods to implement this feature, but so far, I have been unsuccessful. Whenever I click on the button, it modifies the route i ...

htmlreactjsjsxcloudinary

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

More efficient method for sending id to jQuery

I was curious to find a more streamlined approach for passing an id into the timepicker function. Here's my current implementation: JS: function setTimer(id){ $("#" + id).timepicker(); $("#" + id).timepicker('option', { 'minTime ...

javascriptjqueryhtml

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

javascriptjqueryajaxhtmljson.net

How to preselect a value in a select tag in Angular 8

I am looking to assign a default value to a select tag, with the values being declared in a table within my component and displayed using the ngFor directive: <form> <div class="form-group col-4"> <span class="badge badge-theme m ...

htmlangularhtml-selectngfor