Getting footer div color to go vertical in responsive design - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Getting footer div color to go vertical in responsive design

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#footer {<!--from  ww w  . ja  v a 2 s  .c  o m-->
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   width:100%;
   background-color:Chartreuse;
}

.wrap {
   position:relative;
   height:1201px;
}
</style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <div id="footer"> 
    <div class="container"> 
     <div class="row"> 
      <h3 class="footertext">Lorem ips</h3> 
      <br> 
      <div class="col-md-4"> 
       <center> 
        <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="img-circle" alt="the-brains"> 
        <br> 
        <h4 class="footertext">Lorem ipsum do</h4> 
        <p class="footertext">Lorem ipsum dolor sit amet, <br> </p> 
       </center> 
      </div> 
      <div class="col-md-4"> 
       <center> 
        <img src="https://www.java2s.com/style/demo/Firefox.png" class="img-circle" alt="..."> 
        <br> 
        <h4 class="footertext">Lorem ipsum do</h4> 
        <p class="footertext">Lorem ipsum dolor sit amet, conse<br> </p> 
       </center> 
      </div> 
      <div class="col-md-4"> 
       <center> 
        <img src="https://www.java2s.com/style/demo/Google-Chrome.png" class="img-circle" alt="..."> 
        <br> 
        <h4 class="fo<div id=" footer"> 
         <div class="container"> 
          <div class="row"> 
           <h3 class="footertext">Lorem ips</h3> 
           <br> 
           <div class="col-md-4"> 
            <center> 
             <img src="https://www.java2s.com/style/demo/Opera.png" class="img-circle" alt="the-brains"> 
             <br> 
             <h4 class="footertext">Lorem ipsum do</h4> 
             <p class="footertext">Lorem ipsum dolor sit amet, <br> </p> 
            </center> 
           </div> 
           <div class="col-md-4"> 
            <center> 
             <img src="https://www.java2s.com/style/demo/Safari.png" class="img-circle" alt="..."> 
             <br> 
             <h4 class="footertext">Lorem ipsum do</h4> 
             <p class="footertext">Lorem ipsum dolor sit amet, conse<br> </p> 
            </center> 
           </div> 
           <div class="col-md-4"> 
            <center> 
             <img src="https://www.java2s.com/style/demo/Safari.png" class="img-circle" alt="..."> 
             <br> 
             <h4 class="footertext">Lorem ipsum do</h4> 
             <p class="footertext">Lorem ipsum dolor sit amet<br> </p> 
            </center> 
           </div> 
          </div> 
          <div class="row"> 
           <p></p> 
           <center> 
            <a href="#">Lorem ipsum dolor </a> 
            <p class="footertext">Lorem ipsum do</p> 
           </center> 
           <p></p> 
          </div> 
         </div> </h4> 
       </center> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials