Spacing between division elements and a footer that is positioned with float property

I have searched extensively, but none of the solutions I've found address my specific issue.

There is a persistent 14px gap between vertical DIV elements on my page. Even when inspecting the code, there seems to be no margin or padding causing this gap. It transitions from one div (with no bottom margin or padding) to the next (with no top margin or padding).

The only workaround I've discovered so far is setting the margin of the lower DIV to -14px, which doesn't feel like the right solution.

In addition, my FOOTER seems to be floating in the middle of the screen!

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>
</head>
<body>
    <header>
        <!-- navigation -->
    </header>
    <main>

        <div class="banner">
            <div>
                <h3>Some text</h3>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius.
                </p>
            </div>
        </div>
        <div class="services-section">
            <p>
                These are services
            </p>
        </div>
        <div class="contact-section">
            <p>
                This is content
            </p>
        </div>
    </main>
    <footer>
        <ul>
            <li>something
            <li>something else
        </ul>
    </footer>
</body>
</html>

CSS:

html,body,main
{
    height: 100%;

}

footer
{
    background-color: #000;
    color: white;
    min-height: 120px;
    width: 100%;
}

.banner
{
    background: url('/img/laptop.jpg') no-repeat center fixed;
    background-size: cover;
    color: white;
    height: 100%;
    text-align: center;
}

.banner div
{
    /* padding-top: 200px;*/
    position: absolute;
    top: 40%;
    width: 100%;
}

.banner div h3
{
    font-size: 36px;
    text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9);
}

.banner div p
{
    font-size: 18px;

}

.services-section
{
    background-color: #eee;
    min-height: 520px;
    margin: 0;
    padding: 0;
}

.contact-section
{
    background-color: #1C74BB;
    min-height: 400px;
    margin: 0;
    padding: 0;
}

Fiddle link: https://jsfiddle.net/1vLzvb0k/9/

Thank you!

Answer №1

This area is generated by the p element. To create some space, include margin:0 in the stylesheet.

p{
    margin:0
}

html,body,main {
     height: 100%;
}
footer {
     background-color: #000;
     color: white;
     min-height: 120px;
     width: 100%;
}
 .banner {
     background: url('/img/laptop.jpg') no-repeat center fixed;
     background-size: cover;
     color: white;
     height: 100%;
     text-align: center;
}
 .banner div {
    /* padding-top: 200px;
    */
     position: absolute;
     top: 40%;
     width: 100%;
}
 .banner div h3 {
     font-size: 36px;
     text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9);
}
 .banner div p {
     font-size: 18px;
}
 .services-section {
     background-color: #eee;
     min-height: 520px;
     margin: 0;
     padding: 
}
 .contact-section {
     background-color: #1C74BB;
     min-height: 400px;
}
 p{
     margin:0 
}
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Title</title>
   </head>
   <body>
      <header>
         <!-- navigation -->
      </header>
      <main>
         <div class="banner">
            <div>
               <h3>Some text</h3>
               <p>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius.
               </p>
            </div>
         </div>
         <div class="services-section">
            <p>
               These are services
            </p>
         </div>
         <div class="contact-section">
            <p>
               This is content
            </p>
         </div>
      </main>
      <footer>
         <ul>
            <li>something
            <li>something else
         </ul>
      </footer>
   </body>
</html>

Answer №2

give it a shot

.banner div
        {
            /* padding-top: 200px;*/
            position: absolute;
            top: 40%;
            width: 100%;
        }

attempt

div.banner
        {
            /* padding-top: 200px;*/
            position: absolute;
            top: 40%;
            width: 100%;
        }

if you prefer the banner at the top, remove position:absolute;

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

What is preventing this code from setting the background color of the main content all the way to the bottom of the

I designed this webpage using HTML and CSS. ... #contents { margin: 0px; padding: 0px; width: 100%; background-color: white; color: black; border-top: 3px solid black; background-image: url(img/CloverImage.png); background ...

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

Having difficulties with hovering over a td that has a rowspan

I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...

Retrieving PNG image from dynamically created PDF file with DomPDF

Having trouble displaying an image on a generated PDF using DOMPDF. My DomPDF version is v2.0.3 and I'm working with XAMPP on localhost. This is the output: see image here Below is the code snippet: <?php require_once __DIR__ . '/vendor/auto ...

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

Unveiling the Art of Styling a Reactjs Component with CSS

Recently delving into the world of Reactjs, I've created a component that I'm eager to enhance with CSS :) This component consists of a few buttons and boxes that are revealed when a button is clicked. class Days extends React.Component { con ...

Tracking mouse positions across an HTML document

I've been working on a project inspired by the voxel painter example on the three.js page. In this particular example, the mouse coordinates are utilized to move a roll-over helper that indicates where a box will be placed upon click. mouse.set((even ...

Encountering an issue in Angular 8 where a class is not being added after the page loads, resulting in an

Looking to dynamically add a class to a div element using Angular? I have a condition isTrue, and am utilizing the angular function ngAfterViewInit() to add the class hideOnLoad after the page loads when isTrue becomes true. Instead of traditional javascri ...

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

Is there a way to showcase interactive HTML content similar to an ePub or eBook without the need to convert the HTML into ePub

Looking to enhance the mobile reading experience with a responsive design similar to popular ebook readers like Kindle or iBooks? Want to break long articles into full-screen sections for easy navigation on small devices? Consider using dynamic HTML to ada ...

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

Navigating between various links using the tab key can result in complications with pseudo-elements when using

When using Chrome, try clicking in the results pane and then hit tab to focus on this first link: http://jsfiddle.net/2q6c7c36/2/ Have you noticed how the contents of .box seem to "jump up" outside of its border? It seems that this issue is related to th ...

Tips for expanding the width of an image when employing position:relative

Below is the code snippet: <table border="1" cellpadding="2" cellspacing="2" height="250"> <tbody> <tr> <td> <div style="background: url('path to image'); width: 300px; height: 250px; position: ...

Embedding an iframe with vertical scrolling enabled

Could you explain why I am unable to scroll the full width of the website? Here is a link: http://codepen.io/anon/pen/EKPaao?editors=1100. Also, what do you think about using this solution for adjusting iframes on different screen sizes? My iframe seems to ...

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

Bootstrap Table with Vertical Heading that Responds to Different Screen Sizes

Having an issue with Bootstrap responsive table functionality: it works well for tables with horizontal headings, but I'm struggling to achieve the desired layout for my table with vertical headings. I have several 2-column tables for specifications ...