Databases
StackOverflow2013
Postsdbo
POWhich of these CSS methods would you use?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhich of these CSS methods would you use?
    text
    copied!<p>I recently came across this code which uses a way, which I've never used before, to position 3 columns on a page. I have included this method in my code below in GROUP 2. I use GROUP 1 to achieve the same task myself. Now I know writing mark-up such as CSS and HTML, much like programming, is mostly up to the programmer - provided efficiency etc is not a factor. But in this case, what do you guys think are the pros and cons of GROUP 1 vs. GROUP 2?</p> <p>As an example, since GROUP 2 is using negative margin technique, if the #Left2 div comes before #Middle2 and #Right2, it will go behind #Header2 and not even visible on the page. Personally, I think GROUP 2 method is weaker and less robust since some browsers may not position the divs correctly because of the negative margins. So, what do you guys think?</p> <p>The writer of GROUP 2 code has apparently used it from a book by Zoe Mickley Gillenwater called Flexible Web Design Creating Liquid and Elastic Layouts with CSS. <strong>So I wonder if coding of GROUP 2 is bad practice, why is it in a design book? And if it is not bad practice, why not?</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Layout Test&lt;/title&gt; &lt;link rel="Stylesheet" href="style.css" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="Header1"&gt;GROUP 1&lt;/div&gt; &lt;div id="Left1"&gt; Left &lt;/div&gt; &lt;div id="Middle1"&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;/div&gt; &lt;div id="Right1"&gt; Right &lt;/div&gt; &lt;br class="Clear" /&gt; &lt;div id="Footer1"&gt;Footer&lt;/div&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div id="Header2"&gt;GROUP 2&lt;/div&gt; &lt;div id="Wrapper"&gt; &lt;div id="Middle2"&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;br /&gt; Middle &lt;/div&gt; &lt;/div&gt; &lt;div id="Right2"&gt; Right &lt;/div&gt; &lt;div id="Left2"&gt; Left &lt;/div&gt; &lt;br class="Clear" /&gt; &lt;div id="Footer2"&gt;Footer&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And the CSS:</p> <pre><code>body { background-color: Gray; } #Header1 { background-color: Lime; } #Left1 { background-color: Fuchsia; width: 25%; float: left; } #Middle1 { background-color: Orange; width: 50%; float: left; } #Right1 { background-color: Purple; width: 25%; float: left; } #Footer1 { background-color: Yellow; } .Clear { clear: both; } #Header2 { background-color: Lime; } #Left2 { background-color: Fuchsia; width: 25%; float: left; margin-left: -100%; } #Middle2 { background-color: Orange; margin: 0 25%; } #Right2 { background-color: Purple; width: 25%; float: left; margin-left: -25%; } #Footer2 { background-color: Yellow; } #Wrapper { width: 100%; float: left; } </code></pre> <p>They both look the same at the end:</p> <p><img src="https://i.stack.imgur.com/rFKuy.png" alt="enter image description here"></p>
 

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