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 do I create page transitions for my website

    How do i put an X on the right side of a block?

    How to disable the letter tail from the last letter of a word in CSS?

    How to convert an image for a website menu button into CSS

    How to open html document within

    How to do scale to fit in my case?

    How to select all elements that are not of a class within an id css

    How to make a css compatible by all browser

    How to inline elements with CSS

    HTML/CSS footer on mobile site doesn't work on IPhone safari How to fix?

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    How to detect css properties in div

    How I can set a different font size for my text by css?

    How to add CSS to a class through jQuery?

    How to animate my header to slide in horizontally from left to page view on load?

    How can I change the selection text background using CSS?

    How to create a 3 columns fluid fixed fluid layout?

    How to set link on image using maplink in responsive theme?

    How to properly float this image verticaly aligned?

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    Space on Navigation right and left…how to remove it?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    How To Add CSS & JavaScript Into Windows Form Application C#.net

    how to write this code as link click animation

    How to add a half circle at the bottom middle of my header?

    What is a CSS Parse error and how do I fix it?

    how to make a div expand to wrap a dynamic content in css

    How to push floated element to below another floated element?

    How to clear the parent css

    How do I get a jquery function to only affect the child element of 'this'