Firefox Design Great - How in IE?

SuperBlue · November 18, 2008

Please note i don't claim to know everything there is to know about web design, but saying that floats are more flexibility is simply ignorant, so is saying float based layouts are smaller then AP based, because generally there won't be much of a difference, not that it would matter much in practice anyway.

The below layouts is almost the same as the one i posted last, cleaned up a bit, and re-done using floats as well. Each layout uses embedded css to enable copy/paste, and has included comments in their css, as well as some general content-text just to fill out the CenterContent, padding on the CenterContent was avoided to get around the messy box-model.

The Absolute Positioning layout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
   <style type="text/css">
* { margin: 0; padding: 0; }
.D1 {
/* Controlling the flow requires this positioning */
position: absolute;
top: 125px;
/* Controlling the flow requires this positioning-END */
background: #e6f4f4;
}
.S1 {
width:100%;
background:silver;
margin: 1em 0 0 0;
}
.S2 { /* Padding will add to the width of the normal box model, so we simply avoid padding by using a wrapper. */
margin: 0 auto;
width: 98%;
text-align:left;
}
body {
background: #72c1ca;
margin: 0;
padding: 1em;
text-align: center; /* IE6 specific way to center blocks */
}
#Basement {
position: relative; /* Used to anable absolute positioning "inside" basement */
width: 75%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto; /* The normal way to center elements, IE6 uses text-align instead. */
}
#CenterContent {
width: 59%;
left: 20.5%;
}
#LeftContent {
width: 20%;
left: 0;
}
#RightContent {
width: 20%;
right: 0;
}
#TopContent {
height: 120px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
#CenterContent p { margin-bottom: 1em; }
   </style>
<!--[if lte IE 6]>
   <style type="text/css">
#Basement {
/* min-width fix for IE6 */
width:expression(document.body.clientWidth < 550 ? "500px" : "75%" );
}
   </style>
<![endif]-->
    <title>Example Title</title>
  </head>
  <body>
    <div id="Basement">
      <div id="CenterContent" class="D1">
       <div class="S2">
        <h1>Layout Description - CenterContent</h1>
        <p>This layout is fully position based, and works both in IE6 and IE7. The content inside <em>CenterContent</em>  

was only wrapped inside a division to avoid having to deal with the extra widths added by using padding, the wrapper was 

given a width of 98% which creates a nice distance towards the edges.</p>
        <h2>Element Placement</h2>
        <p>The CenterContent was placed first in the flow, and TopContent was placed last in the flow, this may help 

improve accessibility for some user agents, and might even improve CTR when SE's uses text from the page content as 

descriptions. This way we avoid SEs using anchor text, and alternative text from images as part of descriptions.</p>
        <h2>The Example Boxes</h2>
        <p>The silver boxes in the right and left column are not to be taken as divisions, you could easily replace these 

boxes with images, paragraphs, or navigation lists. Both columns where given a background color, as well as the divisions, 

this is only to highlight the top margin which where applied</h2>
       </div>
      </div>
      <div id="LeftContent" class="D1">
        <p>LeftContent</p>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
      </div>
      <div id="RightContent" class="D1">
        <p>RightContent</p>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
      </div>
      <div id="TopContent" class="D1">
        <p>TopContent</p>
      </div>
    </div>
  </body>
</html>

It would be worth to mention about the float based, that unlike what some think, it is possible to control the elements placement in the page, it just requires some more planning.

Below is the float-Based version, which almost renders an exact copy of the AP layout, and would render the content first as in the AP layout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Example Title</title>
    <style type="text/css">
* {  margin: 0;padding: 0; }
body {
background: #72c1ca;
text-align: center; /* IE6 specific way to center blocks */
}
.D1 {
/* Controlling the flow requires this positioning */
position: relative;
top: 125px; /* height of TopContent + 5px */
/* Controlling the flow requires this positioning-END */
float: left;
background: #e6f4f4;
}
.S1 {
width: 100%;
background: silver;
margin: 1em 0 0 0;
}
.S2 { /* Padding will add to the width of the normal box model, so we simply avoid padding by using a wrapper. */
margin: 0 auto;
width: 98%;
text-align:left;
}
#Basement { /* nessosery for min/max-width */
position: relative; /* Used to anable absolute positioning "inside" basement for TopContent */
width: 75%;
min-width: 550px;
max-width: 1000px;
margin: 1em auto; /* Standard Centering */
}
#LeftContent {
left: -59%; /* width of CenterContent */
width: 20%;
}
#RightContent {
width: 20%;
left: 1%; /* 0.5 + 0.5 (space between columns) */
}
#CenterContent {
left: 20.5%; /* width of LeftContent (+ 0.5 space between columns) */
width: 59%;
}
#TopContent {
/* Controlling the flow requires this positioning */
position: absolute; /* easiest method to place the element viasually at the top */
top: 0;left:0;
/* Controlling the flow requires this positioning-END */
width: 100%;
height: 120px;
background: #e6f4f4;
}
#BottomContent {
background: gray;
width: 100%; display: none; /* Optional BottomContent */
}
#CenterContent p { margin-bottom: 1em; }
    </style>
<!--[if lte IE 6]>
   <style type="text/css">
#Basement {
/* min-width fix for IE6 */
width:expression(document.body.clientWidth < 550 ? "500px" : "75%" );
}
   </style>
<![endif]-->
  </head>
  <body>
    <div id="Basement">
  <div id="CenterContent" class="D1">
   <div class="S2">
    <h1>Layout Description - CenterContent</h1>
    <p>This layout is almost entirely float based, the TopContent was however placed at the Top using Absolute Positioning, 

to maintain a SE friendly structure, this might also be of help to some user agents, I.e. Screen Readers.</p>
    <p>Each column was floated to the Left, and positioned using <em>position:relative;</em>, this allows us to control the 

structure of the page in float based layouts, something which is often mistaken only to be possible in fully position based 

layouts.</p>
    <p>A Background color was applied to each column to highlight their placement. The BottomContent is optional, simply 

remove it from the markup/style if you don't want it, enable it by removing <em>display:none;</em></p>
   </div>
  </div>
  <div id="LeftContent" class="D1">
   <p>LeftContent</p>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
  </div>
  <div id="RightContent" class="D1">
   <p>RightContent</p>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div class="S1">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
  </div>
  <div id="TopContent">
   <p>TopContent</p>
  </div>
  <div id="BottomContent" class="D1">
   <p>BottomContent</p>
  </div>
    </div>
  </body>
</html>

Both layouts should work in IE6 and IE7 including firefox. The file-size when compared without the comments in the CSS and CenterContent-text is almost the same, the difference is minimal. AP: 2,49KB Float: 2,58KB

The AP based is only a tiny bit smaller then the float based. More complex AP based layouts would however require more markup and styles, so those would obviously be bigger. But then again they would be impossible to create using floats alone, some of it might be faked with relative positioning, but it would be tricky to work with compared to AP, and just about even out the coding required.

SuperBlue · November 18, 2008

Taking the CSS alone for the given layout, (above was a bit messed since i was testing some stuff).

Leave out the BottomContent along with its styles, and the difference would be even smaller.

* { margin: 0;padding: 0; }
body {
background: #72c1ca;
text-align: center;
}
.D1 {
position: absolute;
top: 125px;
background: #e6f4f4;
}
.S1 {
width:100%;
background:silver;
margin: 1em 0 0 0;
}
.S2 {
margin: 0 auto;
width: 98%;
text-align:left;
}
#Basement {
position: relative;
width: 75%;
min-width: 550px;
max-width: 1000px;
margin: 1em auto;
}
#CenterContent {
width: 59%;
left: 20.5%;
}
#LeftContent {
width: 20%;
left: 0;
}
#RightContent {
width: 20%;
right: 0;
}
#TopContent {
height: 120px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
#CenterContent p { margin-bottom: 1em; }

* { margin: 0;padding: 0; }
body {
background: #72c1ca;
text-align: center;
}
.D1 {
position: relative;
top: 125px;
float: left;
background: #e6f4f4;
}
.S1 {
width: 100%;
background: silver;
margin: 1em 0 0 0;
}
.S2 {
margin: 0 auto;
width: 98%;
text-align:left;
}
#Basement {
position: relative;
width: 75%;
min-width: 550px;
max-width: 1000px;
margin: 1em auto;
}
#CenterContent {
left: 20.5%;
width: 59%;
}
#LeftContent {
left: -59%;
width: 20%;
}
#RightContent {
width: 20%;
left: 1%;
}
#TopContent {
position: absolute;
top: 0;left:0;
width: 100%;
height: 120px;
background: #e6f4f4;
}
#CenterContent p { margin-bottom: 1em; }

I ended up with AP: 2,6KB vs Floats: 2,7KB, clearly that wouldn't be enough to attack AP based layouts. Note i didn't remove spaces and returns, its likely that there are smaller differences there as well.

Nevertheless it was fun, i even got to use my second computer just to test this in IE6. As of which to use, well I'm not really against either of the techniques. I'm just saying that each have their own use, floats mostly for images and header/footer type of layout, while AP would be the obvious choice when dealing with z-index (the "layer" type of layouts).

I however still prefer AP until browsers start to support some richer styling of borders, and positioning of multiple backgrounds on single elements.

haku · November 18, 2008

I gotta admit, the link posted by dropfaith was AP and was absolutely fine. But AP just isn't going to work for all layouts.

bronzemonkey · November 20, 2008

@haku - dropfaith's layout is using floats

BlueBoden's layout is trivially simple...anything more complex or variable and the flexibility is negatively affected when you use absolute positioning.

- The header is a fixed height.

- There is no footer.

- There is just one simple 3 column layout.

- No ability to merge columns one into the other

I also disagree with placing your top content last in the source. The vast majority of the time this houses the main client branding, search, and primary navigation - which should all by first in the source.

The use of absolute and relative positioning for so many elements in the document also risks reducing the flexibility and ease of absolute positioning for when it is most useful in repositioning specific elements to visually appear in a position different to their source position. There are very important uses for absolute positioning - which is why I also strongly disagree with people who say it should hardly ever be used - but it should be used for when it is the most appropriate tool for the job. When it comes to basic structural layouts, floats are simply superior to absolute positioning.

haku · November 21, 2008

@haku - dropfaith's layout is using floats

Ahh, going back and looking, I posted the wrong username, it was the layout you posted that looks ok.

It was nothing spectacular, but it worked.

I do agree with you on everything you've said though. Absolute positioning has it's place - I use it. But I don't absolutely position a whole layout, because you just lose too much flexibility by doing so. And as I said when this whole thing started, it's an easy trap for newbies to fall into, because it seems like it should be the solution to all problems. The only problem being that it's not!

Sign In

Firefox Design Great - How in IE?

Recommended Posts

SuperBlue

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information