Menu
I recently started some web programming/designing and I'm facing this problem.
In HTML5 you have these cool tags like section and header and footer and everything.
divs?Moving to a more specific problem, I have to create a website with a simple header -> content (section) -> footer structure (note: I'm no interested in IE compatibility). I would like the central section to expand (vertically) as much as it can, until it meets the footer.
The "until it meets the footer" part can be achieved through some padding-bottom but what about the "extending as much as possible" part? Note that the footer should stop when, while resizing the page, it meets the section.
I mean, I know with some divs life would be easier, but is it possible that with today standards I still have to wrap the whole page in a <div id="container"> tag?
So the second question arises...
html and body as containers of a div#container by making the html be the html + body part and the body be the div#container?I hope my question is clear, I know I tend to digress when I write.
Note for clarity, I will add my HTML structure and some highlights from my CSS here, but I don't know if they're relevant to the question.
HTML:
<html>
<head...>
<body>
<header id="page_header">
stuff in the header...
</header>
<section id="page_content">
stuff in the main section...
</section>
<footer id="page_footer">
an almost-sticky footer...
</footer>
</body>
</html>
CSS:
* {
margin: 0;
}
html {
background-image: url('../res/img/bg-light.png');
height: 100%;
position: relative;
}
body {
width: 900px;
height: 100%;
margin: 0 auto 20px auto;
padding: 0;
}
section#page_content {
min-height: 400px; // ? does this stop the footer from being dragged over the content when resizing?
width: 80%;
margin: 0 auto;
}
footer#page_footer {
position: absolute;
height: 20px;
width: 100%;
left: 0;
bottom: 0;
}
Micro-note why the hell my body doesn't start from the exact top of the page, while starting a few pixels from the top? Just asking.
870
The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages. It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.
The primary issue with heavy use of <div> tags is that they lack semantic meaning. Writing Semantic HTML gives your markup meaning to web browsers and screen readers, can help with SEO, makes it easier to debug code, and more. According to the W3C: “The div element has no special meaning at all…
The div container is only recommended when other elements cannot be used, as the div container does not have its own semantic features.
Yes, most tags such as <section>, <header>, and <footer> behave very similarly to <div>'s. They're very much up to you to determine how you use them. However, you shouldn't overlook the importance of using <div>s, especially for styling. I've seen a few CSS frameworks (twitter Bootstrap and Blueprint come to mind) that supply you with a <div class="container"> for styling. For readability though, <section>, <footer>, <header>, and also <article> can be very beneficial.
By all means, use HTML5 where possible and where compatible, but I believe you'll always be able to find a useful and beneficial way of using <div>s in your web code now days.
That's just my opinion.
I found this link when I searched. It may shed some light on the issue better than I can. It points out several distinct places to use <div>s over newer HTML5 tags.
You could use <html> or <body> tags in place of a div container. There's certainly nothing wrong with it, and it may even make your code slightly cleaner. I, personally, always use some sort of container, though. I found this question that I believe answers that pretty clearly.
Also, the body should fill the screen. If it's not, check your CSS.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
