CSS Forum

**World** · 06:10 PM

I'm trying to finish the "Head first" html/xhtml book. As long as you just follow the book, it's OK, but now that I try to combine things myself, everything breaks apart.

I tried to combine the "jello" design with fixed positioning.

Code:

#allcontent {

width:   800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgb(180,180,180);
margin-left: auto;
margin-right: auto;
}

This works when I float the main column and the sidebar.

When I try to absolutely position them, the #allcontent div breaks apart.

e.g.

Code:



#main {

position:  absolute;
top:        128px;
left:        0px;
width:     420px;
}

This leads the main column to land all the way to the left of the browser window.

The sidebar lands all the way to the right.

Of the browser window, not of the page borders.

When I absolutely position an element inside an absolutely positioned element, the whole page flies apart like constructed by a suicide-web designer.

The 800px width is completely ignored by all elements except by the header. I don't know why the header respects it.

I very much regret having bought for my first design book "Head First: HTML with XHTML and CSS" (a big curse on those Amazon.com reader's reviews). (I'd be able to name many more body parts that would make a better name for this book than "head", but none of them is pretty). This book explains the obvious, and passes out when it comes to the important things, like the cascade, which is just mentioned and "dealt with" on 2 pages.

I really miss solid information here.

So, any hint what is going on here would be considered helpful.

PS: If you are wondering why I don't ditch the "Intestinal Conent First: HTML with XHTML and CSS" book (I already bought Michael Bowers' "Pro CSS and HTML Design Patterns"): if something doesn't work I want to solve it rather than ditch it, and I want to find out where the incomplete information is that I have gotten.

**World** · 03-01-2009, 06:15 PM

Just in case, here's the code. I'm sure it's a nightmare. The tough and merciful may proceed (it's mostly from the book, but with my ill-fated attempts to create a jello layout with fixed positioned divs.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Starbuzz Coffee</title>
    <link rel="stylesheet" type="text/css" href="starbuzz-number2.css" />
  </head> 

  <body>
  
  
  
 <div id="allcontent">

  
  
    <div id="header">
      <img src="http://www.webmaster-talk.com/images/header.gif" alt="Starbuzz Coffee header image" />
    </div>

 <div id="award">
  <img src="http://www.webmaster-talk.com/images/award.gif" alt="Roaster of the Year award" />
</div>
 

    <div id="main">
    
   

      <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
      <p>
        At Starbuzz Coffee, we are dedicated to filling all your  caffeine needs through our 
        quality coffees and teas. Sure, we want you to have a great cup of coffee and a great 
        coffee experience as well, but we're the only company that actively monitors and 
        optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean 
        Machine online order form, and get that quality Starbuzz coffee that you know will meet 
        your caffeine standards.
      </p>
      <p>
        And, did we mention <em>caffeine</em>? We've just started funding the guys doing all 
        the wonderful research at the <a href="http://buzz.headfirstlabs.com"
        title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
        If you want the latest on coffee and other caffeine products, 
        stop by and pay them a visit.
      </p>
      <h1>OUR STORY</h1>
      <p>
        "A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted
        in a **** good cup of coffee.  Starbuzz's CEO is that man, and you already know his 
        plan: a Starbuzz on every corner.
      </p> 
      <p>In only a few years he's executed that plan and today 
        you can enjoy Starbuzz just about anywhere.  And, of course, the big news this year 
        is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence,  
        which is growing rapidly and helping to meet the caffeine needs of a whole new set of 
        customers.  
      </p>
      <h1>STARBUZZ COFFEE BEVERAGES</h1>
      <p>
        We've got a variety of caffeinated beverages to choose
        from at Starbuzz, including our 
        <a href="beverages.html#house" title="House Blend">House Blend</a>,
        <a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>, 
        <a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>,
        and a favorite of our customers, 
        <a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
      </p>
      <p>
        We also offer a variety of coffee beans, whole or ground, for you to
        take home with you.  Order your coffee today using our online
        <a href="form.html" title="form.html">Bean Machine</a>, and take
        the Starbuzz Coffee experience home.
      </p>
    </div>

    
    <div id="sidebar">
    
   
    
      <p class="beanheading">
        <img src="http://www.webmaster-talk.com/images/bag.gif" alt="Bean Machine bag" />
        <br />
        ORDER ONLINE
        with the 
        <a href="form.html">BEAN MACHINE</a>
        <br />
        <span class="slogan">
            FAST <br />
            FRESH <br />
            TO YOUR DOOR <br />
        </span>
      </p>
      <p>
        Why wait?  You can order all our fine coffees right from the Internet with our new, 
        automated Bean Machine.  How does it work?  Just click on the Bean Machine link, 
        enter your order, and behind the scenes, your coffee is roasted, ground 
        (if you want), packaged, and shipped to your door.
      </p>
    </div>
    
    
    <div id="footer">
      &copy; 2005, Starbuzz Coffee
      <br />
      All trademarks and registered trademarks appearing on 
      this site are the property of their respective owners.
    </div>
    
   </div>
  </body>
</html>

And here's the CSS:

Thank you.

Code:

body { 
  background-color: rgb(255,255,0);
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

#header {
  background-color: #675c47;
  margin:           10px;
  height:           108px;
}

#main {
  background:       #efe5d0 url(images/background.gif);
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  position:			absolute;
  top;				128px;
  left:				0px;
  width:			420px;
  
}

#sidebar {
  position:			absolute;
  top:				128px;
  right:			0px;
  width:			280px;
  background:       #efe5d0 url(images/background.gif);
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  
}

#footer {
position:			absolute;
left:				0px;
bottom:				0px;
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:			left;
}

h1 {
  font-size:        120%;
  color:            rgb(155,0,0);
}

h2 { font-size: 110%; }

.slogan { color: #954b4b; }

.beanheading {
  text-align:       center;
  line-height:      1.8em;
}

a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

#award {
position:			absolute;
top:				100px;
left:				300px;
}


#tv {
position:			absolute;
top:				100px;
left:				100px;

}


#allcontent {

width:				800px;
padding-top:		5px;
padding-bottom:		5px;
background-color:	rgb(150,200,50);
margin-left:		auto;
margin-right:		auto;
}

**World** · 03-02-2009, 12:22 PM

Nobody?

**LadynRed** · 03-02-2009, 01:07 PM

Set your #allcontent to position:relative, that will allow the positioning of everything else inside it to be relative to the #allcontent div rather than the body.

I would advise against all that positioning, as you're finding out, it' a nightmare, especially for newbies, and IE has huge problems with it.

I don't know the book you're going by, but I highly recommend this one:
http://www.sitepoint.com/books/html1/

I would recommend learning to use the normal document flow and floats, you can achieve a 'jello mold' layout with floats.

**World** · 12:24 AM

Thanks, LadynRed.

So, you mean I add what you recommended like this:

Code:

#allcontent {

position: relative;
(...)
}

Because allcontent covers the whole page without having actually any content. Must be a trick, like priming the whole system to work with relative positioning...

I'm looking at that book your recommended.

There's now a revised second edition:

http://www.sitepoint.com/books/html2/

I'm starting a book I already bought, Michael Bowers' "Pro CSS and HTML design patterns". I guess having another entry level book won't hurt. It's good to see the basics from different points of view.

PS: on my own project I used relative positioning together with a float, and it worked. Tried to enter absolute positioning: BOOOOM!!

**LadynRed** · 03-03-2009, 09:21 AM

Quote:

Must be a trick, like priming the whole system to work with relative positioning...

No, it's not a 'trick' and it doesn't work like that. You need to understand the nature of positioning: http://www.barelyfitz.com/screencast...s/positioning/

Are you going for a full-page layout ? Where do you want the columns to be ?
If you want them to line up under the header section, then you're going to need another "container" that is the same width as the header and put everything else inside it. Set IT to position: relative. Then use floats on the columns to put them where you want them.

You can get an 'elastic' layout by using percentages on your widths, but using position:absolute on everything just isn't elastic at all, you're essentially nailing everything in place.