Help with 3 column template

Not too difficult. Move the #footer div out of #pageWrapper, set html and body to 100% height, add the min-height to #pageWrapper, make sure the footer is a fixed px height and use a negative margin to ride it up over the content… toss in the typical fixes for IE and Opera having ‘issues’ with min-height layouts, pad the bottom of each column so the footer won’t ride up over their content… sure, no problem. Like a minute of copypasta really.

http://www.cutcodedown.com/for_others/enormousRodent/template.html
(Same URL so refresh a couple times for the new CSS and markup)

That what you wanted?

OK, none of that is too hard to accomplish. But you should give a link to what you have so far, so we advise on how to improve it. Otherwise, you are basically handing the job on to us, which is not what we are here for! :wink:

Here are some examples that may help, though:
http://www.pmob.co.uk/temp/3coltest-2.htm
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

it seems to me you are cheating. :confused2

here’s my screenshot. you’ll see a consistent behaviour across browsers.

Two characters instead of one – tsk tsk

there is a reason for it!

Of course it’s zero-white space between div reliant, which is just bad coding.

you are cheating again!

><head>

… and more from were this one comes :slight_smile:

the floated div appears under #main

i don’t see it under, i see it next to, in the first inline-block div, its parent, but hey :wink: you could always try float:left to see.

there’s the random px gap due to the rounding errors depending on width

that’s the thing i’m trying to find a solution for :slight_smile:

Two characters instead of one – tsk tsk :smiley:

I’m assuming what IE8 is showing me is what you are aiming for – in FF the floated div appears under #main (which doesn’t make any sense), in Opera it’s on the far right side of the screen…in both Opera and webkit the third column is dropping down a line, and then there’s the random px gap due to the rounding errors depending on width.

Kinda funny it only works properly here in IE8.

Of course it’s zero-white space between div reliant, which is just bad coding. (I used to advocate the same approach for LI, but I changed my attitude on that as I learned more CSS.)

Inline block can be very handy – but it’s just too broken for something like this to be practical.

let me start with a quote or two from your favourite, Patton:

“If everybody is thinking alike, then somebody isn’t thinking."

“Never tell people how to do things. Tell them what to do and they will surprise you with their ingenuity.”

now…

if floats were supposed to be columns they would be called columns :slight_smile: so floats for columns are a hack.

there is a clear reason why floats are hacks: in a fluid layout, where dimensions are expressed in % for example, the box model dimensions calculated for elements are finally reduced to pixel dimensions, since web is primarily for display. the rounding appearing after approximations will never ensure a symmetry, hence the float for column, hence the hack when using float for a column: hiding the approximations under the rug and planting floats as the rug to hide it under. HACK. :slight_smile:

those ids and classes have a clear purpose, but feel free to rant about them :slight_smile: if you can’t/choose not to grasp the simple logic of those, i would not bother explaining them to you only so you can have another fired up argument :wink: when you start adding content, when you try to gather all the css in one file, it all makes sense. that is a template, not a good example of how to use ids and classes. the main elements are the only ones treated like that.

the header is not a heading :slight_smile:

text-align is effective for elements that have display:inline-block (look at the different colours divs, aligned to the center) , even though they were blocks before. it works (and you’re probably using) on lis which are also block elements.

the whitespace inline-block implies it’s the problem i need more time to think about :slight_smile: i tried whitespace stripping, in a following attempt, but it’s still lacking the float ability to stick to the right side. when resizing browser window, sometimes, a one pixel gap appears.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language" content="en">

  <style type="text/css">
    
    /* 
     * one can put a css reset here
     * if indeed justifiable
     * but not just by habbit
    */

    /* 
     * .page needs a safe min-width:800px 
     * so it won't break % width for .contentsection,
     * but it could be less, given some calculations
    */

    div { text-align:center; }
    
 
    .page { background:#ddd; }
    
      #content { letter-spacing: -4px; word-spacing: -4px; }
      #content * { letter-spacing: normal; word-spacing: normal; }
      
        .contentsection { display:inline-block; vertical-align:top; }
        
        /*
         * the following two ie fix/hacks could be 
         * place in a different css file, w/o the hacks,
         * and then make use of CC for IE 
         */
        *html .contentsection { display:inline; }
        *+html .contentsection { display:inline; }
            
        #header { background:#dfe; }
        #nav1, #nav2 { width:25%; background:#fed; }
        #nav1 { text-align:right; }
        #nav2 { text-align:left; }
        #main { width:50%; background:#def; }
        #footer { background:#fde; }
    
  </style>

</head><body id="inlinetest" class="page">

    <div id="header" class="pagesection">
      <span>header</span>
    </div>

    
    <div id="content" class="pagesection">
    
      <div id="nav1" class="contentsection">
        <span>a nav here</span><br>
        <span>another line</span><br>
      </div>

      <div id="main" class="contentsection">
        <span>main content here<span>
      </div>

      <div id="nav2" class="contentsection">
        <span>another nav here</span>
      </div>
      
    </div>

    
    <div id="footer" class="pagesection">
      <span>footer</span>
    </div>
  
</body></html>

aside from obvious ie problems, it’s an improvement: 50+25+25, no 49 or 24. this one got me thinking about a combination between the two: inline blocks and floats. maybe, i will try different scenarios.

the inline-blocks layout breaking under a certain width or certain conditions is also common to the floats layout.

not all paged have to be 100% height, some just extend how they fit…

css works the way everybody likes, it’s not “your way or the highway”, you know.

your latest example is using floats and i don’t want that. as i’ve said you provided a perfect example on how to do it with floats. Paul O’B did too. over and over again. i’m trying another way, inline-blocks, that, if had a proper justify alignment on line, would’ve made floats a lot less known. since floats were the table terminators, browsers evolved too. if by me trying to go w/o floats means your last paragraph, so be it :slight_smile:

and i’ll be waiting your comments on the next post i’ll make on my attempt to see if inline-block can be use sometimes. all criticism is good for me :cool:

you are a knowledgeable man, no doubt, but you need to learn to let others creative attempts be also. otherwise i’m afraid the floats for column idea would’ve been inexistent.

that said, i’m not the only one attempting such a thing. maybe something will come out, who knows.

No markup was, is, or will be harmed during this trials. Only my brain :slight_smile:

@ds60

if you are worked up by the fireman reference, that one was by no means intended as an insult :slight_smile:

i said that the fixes are not developers fault, right :wink:

there is more that one way to skin a cat, and that’s why the floating for columns will not be always the best option.

while floating and negative margins work, these are hacks, by their very english language definitions, and nothing you can say will change that.

i’m working on a thread for the inline-block columns, i just need a little more documentation :slight_smile:

but here is the starting point:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language" content="en">

  <style type="text/css">
    
    /* 
     * one can put a css reset here
     * if indeed justifiable
     * but not just by habbit
    */

    /* 
     * .page needs a safe min-width:800px 
     * so it won't break &#37; width for .contentsection,
     * but it could be less, given some calculations
    */

    div { text-align:center; }
    
 
    .page { background:#ddd; }
        .contentsection { display:inline-block; vertical-align:top; }
        
        /*
         * the following two ie fix/hacks could be 
         * place in a different css file, w/o the hacks,
         * and then make use of CC for IE 
         */
        *html .contentsection { display:inline; }
        *+html .contentsection { display:inline; }
            
            #header { background:#dfe; }
            
            /*
             * Opera doesn't know but integer procentual values,
             * so the left/right gaps for navs are bigger in it
            */
            #nav1, #nav2 { width:24.5%; background:#fed; }
            #nav1 { text-align:right; }
            #nav2 { text-align:left; }
            #main { width:50%; background:#def; }
            #footer { background:#fde; }
    
  </style>

</head><body>

  <div id="welcome" class="page">

    <div id="header" class="pagesection">
      header
    </div>

    
    <div id="content" class="pagesection">
    
      <div id="nav1" class="contentsection">
        a nav here<br>
        another line<br>
      </div>

      <div id="main" class="contentsection">
        main content here
      </div>

      <div id="nav2" class="contentsection">
        another nav here
      </div>
      
    </div>

    
    <div id="footer" class="pagesection">
      footer
    </div>
  
  </div>
  
</body></html>

Well, let’s see a 100% min-height layout that doesn’t require the opera and IE fixes? You have made 100% min-height layouts, right? … and no, position:fixed or position:absolute is NOT the answer (given the headaches of interaction with the scrollbar in certain browsers, and that it doesn’t even work in 6- )

… and what’s wrong with negative margins? They’re the cornerstone of keeping CSS layouts simple.

What, making COLUMNS? How else do you make calculated columns without using a table? I mean, you could TRY inline-block, but unless you want the layout to be RELIANT upon white-space stripping to even work that’s a piss poor solution at best; enjoy your column drop on lf/120dpi systems.

If the job is making multiple columns, that’s what floats are FOR!

Given the baseline here is basically a 20 second layout, surely you could toss one together? (Seriously, I’d LOVE to see an example of your coding given you TALK a good game, but we’ve yet to see the walk). I mean three columns, center fluid, outer two fixed, 100% min-height… Oh and for fun and SEO, keep it center column source order first…

This could be done a LOT simpler without the negative margins if you give a crap about source order… put both sidebars first, float one left, the other right, set margins on the center column to make sure it doesn’t ‘break out’ after the ends of the side columns – but there’s a REASON layouts like ‘holy grail’ exist. (Though I’d rather use the extra div than use the extra hacks holy grail does).

suit your self.

but the solution and techniques provided are not the only ones possible. if you’d like, i’ll give you a hint:

  • stacked divs
  • display:inline-block

and about me providing an example for you, and the tone you’ve used:

  • would imply you actually pay us to do your job :wink:
  • you’ve provided no markup, only a mockup and the requirements, like a client does :wink:

how about a little sweat from your part also :slight_smile:

that said, i’d be happy to assist you if you’d like to take the different road i’ve hinted above :cool: