How can I remove the spacing above a block element in CSS?


Tags: css,html5,css3

Problem :

I am designing a website and I have come across a problem that I cannot seem to fix. The layout of my page is completely designed by HTML DIVs and certain elements are nested in relative position to their parent DIV. I am trying to position a banner-wrap DIV underneath the DIV which holds my navigation menu without having any space between it, but I cannot figure out how to remove the space.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
    <body class='landing-page wsite-theme-light'>
        <div id="nav-mast">
            <div class="container">
            <table>
                    <tr>
                    <td id="logo">{logo}</td>
                    <td id="nav">{menu}</td>
                    </tr>
            </table><!-- end navigation table -->
        </div><!-- end nav bar contanier -->
    </div><!-- end navigation mast -->
    <div id="landing-wrap">
        <div class="container">     
        <div id="banner">
            <div class="wsite-header"></div>
        </div><!-- end banner -->
            <div id="banner-social-screen">
                <h3>Contact</h3>
                {social}
        </div><!-- end banner social screen -->
        <div id="banner-screen">
            <div class="banner-screen-inner">
                <div class="banner-screen-content">
                    <h2>{headline:text global="false"}</h2>
                    <p>{headline-paragraph:text global="false"}</p>
                    <div id="landing-button">{action:button global="false"}</div>
                </div><!-- end banner screen content -->
            </div><!-- end inner banner screen -->
        </div><!-- end banner screen -->
        </div><!-- end landing container -->
    </div><!-- end landing wrap -->

The navigation bar is the nav-mast div and the space is being created between the nav-mast DIV and the landing-wrap DIV. The landing-wrap DIV holds a header image with two semi-transparent elements which are held in the banner-screen and banner-screen-social DIVs. The banner-screen-social DIV has an h3 text element and the social icons for my website. The banner-screen DIV has an h2 text element that holds my landing page headline and a p text element that holds the paragraph-headline. I want both the banner-screen-social and banner-screen elements to appear on top of the image (as they do), but my issue is that there is now a spacing between the bottom of the nav-mast element and the top of the landing-wrap element.

This is my current CSS which results in a space (image in link):

.landing-page #banner-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #landing-wrap {
    background-image: url(banner-tall.jpg);
    height: 500px;
    margin-bottom: 30px;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    background-size: cover;
-webkit-box-shadow: 7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-webkit-box-shadow: -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
}

.landing-page .banner-screen-content h2 {
    top: 15px;
    left: 10px;
    font-family: 'Sansation', sans-serif;
    font-size: 24px;
    line-height: 10px;
    text-align: center;
    position: relative;
}

.landing-page .banner-screen-content p {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    top: 0px;
    line-height: 14px;
    left: 10px;
    text-align: left;
    position: relative;
    word-wrap: normal;
}

.landing-page #banner-social-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: 0%;
    margin-top: 0%;
    width: 20%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #banner-social-screen h3 {
top: 5px;
    left: 3px;
    font-family: 'Sansation', sans-serif;
    font-size: 18px;
    line-height: 8px;
    text-align: center;
    position: relative;
}

This is what my CSS was before the space occurred (image in link):

.landing-page #banner-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #landing-wrap {
    background-image: url(banner-tall.jpg);
    height: 500px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    background-size: cover;
-webkit-box-shadow: 7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-webkit-box-shadow: -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
}

.landing-page .banner-screen-content h2 {
    top: 15px;
    left: 10px;
    font-family: 'Sansation', sans-serif;
    font-size: 24px;
    line-height: 10px;
    text-align: center;
    position: relative;
}

.landing-page .banner-screen-content p {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    top: 0px;
    line-height: 14px;
    left: 10px;
    text-align: left;
    position: relative;
    word-wrap: normal;
}

.landing-page #banner-social-screen {
    text-align: right;
    display: inline-block;
    height: auto;
    width: auto;
    margin-bottom: 0px;
    margin-right: 0px;
    background: rgba(176, 176, 176, 0.70);
    position: relative;
}

.landing-page #banner-social-screen h3 {
top: 5px;
    left: 3px;
    font-family: 'Sansation', sans-serif;
    font-size: 18px;
    line-height: 8px;
    text-align: center;
    position: relative;
}

The issue with that being that I could not properly position the banner-social-screen element when it was displayed as an inline-block.

Is there any way to remove the space between the nav-mast and landing-wrap elements without removing the banner-screen and banner-screen-social blocks from my page?



Solution :

You could try using the position: absolute; attribute in CSS. You would mostlikely need to use this for both the nav-mast and landing-wrap. If the divs still should the unwanted gap try top:0px;. If the gap is still present then try using a negative top:-15px;. You may be able to do this without the position attribute but I tend to use it more often than not.


    CSS Howto..

    how to set max size of a counter?

    How can i make my paragraph go to the next line after a certain width

    How to find number of style classes defined in a CSS file

    CSS-3 - How can I place a white space holder above two columns?

    How can I make two divs stack whilst still having my text wrap without media queries

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How can I resize to fit html elements horizontally using CSS?

    How to make a floated div 100% height of its parent?

    How to place kartik typeahead above text input

    How to prevent division when using variables separated by a slash in CSS property values

    Tizen - how to change button font-size - fixed

    Css accordion menu, how to set height to automatic?

    Bootstrap with Picture Slideshow

    jQuery CSS how to avoid flickering?

    How can I count HTML elements on a printed page using CSS?

    How to set style of active page number in ASP.NET GridView Pager?

    How to remove the effect of all the parent containers on any child control

    How to apply styles for a Datetime Picker Text Box

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to force a button inside a div not to inherit the parent CSS?

    How can I add custom search box on page?

    How do I make an erasing animation in CSS? [closed]

    How to keep div height fixed during changing its content?

    how to set the absolute position div center align

    css: how to vertically align table within div

    twitter bootstrap - how to skip a line?

    HTML/CSS Fluid Grid: How to overlay div to another div

    how to center an item when it's the only one in a multi-column layout

    How to disable flow around elements in table (CSS)

    how to make css animation smoothly for full-screen page?