Responsive CSS layout - how to stretch the background overlay


Tags: html,css

Problem :

I am building a website with a responsive CSS layout: I have two sections here, "third" and "footer". I would like to stretch the background of third to cover up the whitespace that I have between "third" and "footer".

Here is the HTML that I am using:

    <!-- Third -->
        <section id="third" class="main">
            <header>
                <div class="container">
                    <h2>keep in touch</h2>
                    <p>we'd love to hear from you. send us your questions and comments.</p>
                </div>
            </header>
            <div class="content dark style3 featured">
                <div class="container small">
                    <form method="post" action="#">
                        <div class="row half">
                            <div class="6u"><input type="text" class="text" placeholder="Name" /></div>
                            <div class="6u"><input type="text" class="text" placeholder="Email" /></div>
                        </div>
                        <div class="row half">
                            <div class="12u"><textarea name="message" placeholder="Message"></textarea></div>
                        </div>
                        <div class="row">
                            <div class="12u">
                                <ul class="actions">
                                    <li><input type="submit" class="button" value="Send Message" /></li>
                                    <li><input type="reset" class="button alt" value="Clear Form" /></li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>

    <!-- Footer -->
        <section id="footer">
    <div class="content style3 featured">
            <ul class="icons">
                <li><a href="http://www.twitter.com" class="fa fa-twitter solo"><span>Twitter</span></a></li>
                <li><a href="http://www.facebook.com" class="fa fa-facebook solo"><span>Facebook</span></a></li>
                <li><a href="http://www.instagram.com" class="fa fa-instagram solo"><span>Instagram</span></a></li>
                <li><a href="http://www.pinterest.com" class="fa fa-pinterest solo"><span>Pinterest</span></a></li>
                <li><a href="http://www.flickr.com" class="fa fa-flickr solo"><span>Flickr</span></a></li>
            </ul>

        </div>

        </section>

</body>

and the CSS:

    .main
{
    position: relative;
    margin: 0;
}

    .main > header
    {
        background: #fff;
        text-align: center;
        padding: 5em 0 5em 0;
        margin: 0;
    }

        .main > header h2
        {
            font-size: 2.25em;
            font-weight: 100;
            margin-bottom: 0;
        }

        .main > header p
        {
            margin: 2em 0 0 0;
            padding: 0;
            text-align: center;
        }

    .main > .content
    {
        padding: 6em 0 6em 0;
    }

        .main > .content > .container
        {
        }
   .main > .content.style3
        {
            background: url('images/bgtr.svg') top right no-repeat,
                        url('images/bgbl.svg') bottom left no-repeat,
                        url('images/overlay.png'),
                        linear-gradient(45deg, #5f796b, #3a4e59, #2f394e);
        }

This is what it looks like now: http://imgur.com/2gsv2Xk How would I be able to fill in that whitespace?

Here is the CSS for the sections:

        section,
    article
    {
        margin-bottom: 0;
    }

    section > :last-child,
    article > :last-child
    {
        margin-bottom: 0;
    }

    section:last-child,
    article:last-child
    {
        margin-bottom: 0;
    }

    .row > section,
    .row > article
    {
        margin-bottom: 0;
    }

The section article did have a margin-bottom of 3em, but I changed it to 0, and I still see the whitespace.



Solution :

I have prepared an example for you. You can benefit from this example.

See this DEMO

Also i will give you the code:

HTML

<div class="container">
  <div class="text_wrap">
    <div class="div_text">
<input type='text' class='cc-mask' placeholder='Name'/>
    </div>
    <div class="div_text">
<input type='text' class='cc-mask' placeholder='Surname'/>
    </div>
    <div class="message_text">
      <input type='text' class='message-mask' placeholder='Message Here'/>

    </div>
    <div class="send_message_clearform_wrap">
      <div class="send_message">
        <input type="submit" class="sendButton" value="Send Message" />
      </div>
      <div class="clear_form">
        <input type="submit" class="clearButton" value="Celar Form" />
      </div>
    </div>
  </div>

</div>
<div class="white_area"></div>

CSS

body {
  margin:0px;
  padding:0px;
  background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
    background-image: -moz-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
    background-image: -o-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
    background-image: -ms-linear-gradient(135deg, #188aad 0%,#00a698 100%);
    background-image: linear-gradient(-45deg, #188aad 0%,#00a698 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.container {
  width:600px;
  height:400px;
  margin:10px auto;
}
.div_text {
  float:left;
  margin-left:10px;
}
.cc-mask {
  display:inline-block;
  height:40px;
  font-size:18px;
  background:none;
  border-radius:3px;
  border:1px solid #c1c1c1;
  padding:2px;
  outline:none;
  width:250px;

}
.message-mask {
  display:inline-block;
  height:250px;
  font-size:18px;
  background:none;
  border:1px solid #c1c1c1;
  padding:2px;
  outline:none;
  width:518px;
  margin-left:10px;
  border-radius:3px;
}
.message_text {
  float:left;
  margin-top:10px;
}
.sendButton {
    width: 220px;
    height: 54px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: #fff;
    font: normal 11px/24px "Lucida Grande";
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
    background-image: -moz-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
    background-image: -o-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
    background-image: -ms-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
    background-image: linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.send_message {
  float:left;
  width:200px;
  height:56px;
  margin-top:10px;
  margin-left:30px;
}
.clear_form{
  float:left;
  width:200px;
  height:56px;
  margin-top:10px;
  margin-left:30px;
}
.clearButton {
    width: 220px;
    height: 54px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: #fff;
    border:1px solid #fff;
  border-radius:3px;
    font: normal 11px/24px "Lucida Grande";
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;  
}
.white_area {
  width:100%;
  background-color:#fff;
  height:50px;
}

    CSS Howto..

    how to get the cssText of external style?

    “Best fit” font size - how do I measure a sentence width?

    Background Image in WebView showing in Simulator, but not on Device

    show one div but hide all other divs is not working

    How do I correct this error?

    How to implement Read more / Read less in pure CSS

    How to include custom css in Extjs 6?

    How to create a margin between two seperate divs?

    How to use Google Libraries API (jQuery) with Google App Engine?

    How to fix height respective screen resolution?

    How to remove margin and padding from css table

    How to add spacing in between
    [duplicate]

    How to manage z-index of navigation menu?

    How to Remove - Modify btn-inverse Top Border

    Adding some automatic versioning to CSS files. How come I'm not able to pull assembly info?

    How make input element take up available space next to a fixed width element?

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    How to install CSS templates with Flask?

    AngularJS: How to unselect a span when selecting another

    How to set the added elements by jQuery to the behind of other element

    How can i get an image inside an li to disregard padding with css

    Mysterious color showing up on tab hover

    How to make image “hang over” above background?

    How to remove all the borders of a selectbox?

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to wrap content around an image with CSS?

    How to make a slider with divs and variable width?

    How can I use a CSS transform to vertically-center two overlapping elements?

    With html tables, using CSS, how do I get the tables next to each other?

    How to reuse a css background sprite for icons of different sizes?