Databases
StackOverflow2013
Postsdbo
POAre div's even necessary around most elements since there is absolute positioning
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAre div's even necessary around most elements since there is absolute positioning
    text
    copied!<p>So in the past few months I've taught myself web design. Of course there's a ton more to learn, but I feel that I have a firm grasp on what I know so far. One thing that I've wondered about recently is how necessary the div is, especially when I end up using absolute positioning. For instance I recently I wrote the following code:</p> <pre><code>&lt;section id="header-section"&gt; &lt;header class="main-header"&gt; &lt;h1&gt;The Voice of Jeremy Donahue&lt;/h1&gt; &lt;nav class="main-navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://www.thevoiceofjeremydonahue.com/about"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.thevoiceofjeremydonahue.com/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;/section&gt; </code></pre> <p>When I read the source code on a lot of pages it seems to me that things are generally grouped like this or very similar. Of course my assumption is, as a designer you have artistic license and can arrange your page anyway that you want, while keeping the user experience in mind and keeping your code semantic.</p> <p>However, many times I end up positioning my elements using the {position: absolute} property and completely disregarding the containing div. So my thought is if I have an H1 for example and I plan on positioning it as I've described, then why even bother putting it in a div?, and the same for any other element that I position it such a way. Why not have them as free standing elements? I'm wondering if it's still good to do so for semantic reasons, or if it's just considered best practice to group things this way. I hope that I've been clear in the way that I've described this.</p> <p>Just to be as descriptive as I can, here is the css that I've applied so far to this particular iteration of this page. It's no where close to finished (obviously), but you can see a couple of the absolute positioning that I've applied to this header section.</p> <pre><code>/*global*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { background: rgb(234, 234, 234); } body, .container { min-height: 100%; } .container { background: white; margin-top: 6.25em; } header { position: absolute; top: 0.625rem; background: transparent; text-align: center; } ul { list-style-type: none; } a { text-decoration: none; } /*typography*/ h1 { font-family: 'Parisienne', cursive; font-size: 2.5rem; color: #2713e7; position: relative; top: 1.25rem; } /*lists*/ .main-navigation { position: relative; top: 2.5rem; } .main-navigation li { position: absolute; top: 10px; display: inline-block; margin-right: 10%; font-family: 'Atomic Age', cursive; font-size: 1.5625rem; } /*borders*/ .main-navigation { border: 2px solid black; } .main-navigation li { display: inline-block; border: 2px solid black; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload