473,387 Members | 1,549 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Footer overllaping Article, when it should not be. After adjusting Article height to

Why is it the Footer overlapping the Article (w/ Section tags) even though it should not be. This happens when I set the Html, Body, and Article(and Section) height to 100%.

Thanks for answering the question! :)

Here's the code:


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> <html> <head> <title></title> <style>
  2.  
  3. *{
  4. box-sizing: border-box;
  5. -webkit-box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. }
  8.  
  9. html, body{
  10. margin: 0;
  11. padding: 0;
  12. height: 100%;
  13. color: white;
  14. font-family: sans-serif;
  15. text-align: center;
  16. position: relative;
  17. }
  18.  
  19. .wrapper, header, article, section, footer{
  20. margin: 0 auto;
  21. width: 100%;
  22. position: relative;
  23. }
  24.  
  25. header, section, footer{ padding: 25px 0; }
  26.  
  27. .wrapper, article, section{ height: 100%; }
  28.  
  29. section{ border-bottom: 10px solid red; }
  30.  
  31. header, footer{ background-color: rgba(27,27,27,1); }
  32.  
  33. </style> </head> <body> <div class="wrapper"> <header> <h1>HEADER</h1> </header> <article> <section></section> <section></section> </article> <footer> <h1>FOOTER</h1> </footer> </div> </body> </html>
Dec 29 '14 #1
1 1214
It just fixed to when the Footer was inserted inside the Article tag though...
Dec 29 '14 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

16
by: garyolsen | last post by:
For a class, MyClass, there are two ways to instantiate an object: 1. MyClass *MC = new MyClass(); 2. MyClass MC; In general, when should you have to use 1 and when 2? What're...
6
by: Terry Bell | last post by:
We've had a very large A97 app running fine for the last seven years. I've just converted to SQL Server backend, which is being tested, but meanwhile the JET based version, running under terminal...
1
by: Agnes | last post by:
In my one form, the user need to search many field, e.g customer name, country name, currency.. etc They are using the same conMaster , So, when Should I closed the connection ?? 1st) if the user...
2
by: Michael | last post by:
Hi, I wrote the code to test how CacheItemPriority.NotRemovable works: Cache.Insert("Time", DateTime.Now, new System.Web.Caching.CacheDependency(Server.MapPath("Test.txt")),...
2
by: My SQL | last post by:
Hi I just have one server that runs Apache, MySQL, PHP. It handles requests fine and never had problems. When should I think about a small step into scaling? By maybe having an independent MySQL...
8
by: FAQ server | last post by:
----------------------------------------------------------------------- FAQ Topic - When should I use eval? ----------------------------------------------------------------------- The ` eval() `...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.