Doesn’t the following design just complicate the logical structure?

Question

Hi

I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.

Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):

<div id="container">

   <div id="container2">
      <div id="centercol">
      </div>
      <div id="rightcol">
      </div>
   </div>

   <div id="leftcol">
   </div> 

</div>

CSS file:

   body
{
  margin: 0px;
  font-family: Verdana, Arial, Serif;
  font-size: 12px;
}


   #container
{
  background-color: #818689;
}

   #container2
{
  background-color: #bcbfc0;
  margin-right: 200px;
}

   #leftcol
{
  position: absolute;
  top: 184px;
  left: 0px;
  width: 200px;
  background-color: #bcbfc0;
  font-size: 10px;
}

   #centercol
{
  position: relative;
  margin-left: 200px;
  padding: 0px;
  background-color: white;
}

   #rightcol
{
  position: absolute;
  top: 184px;
  right: 0px;            
  width: 198px;
  color: White;
  background-color: #818689;
  font-size: 10px;
}

Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!

thanx

Answer 1

Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)

I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)

Answer 2

It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).

Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.

Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)

Answer 3

If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.