Loading ...
Sorry, an error occurred while loading the content.

45776YUI Grids - Layouts

Expand Messages
  • netrix37
    Feb 27, 2009
      I'm looking for the best way to create a layout where the top "header"
      is a 100% width but the body is for example 750px. I think it will be
      easier to explain if you saw what I've got so far. Thanks in advance.


      <link rel="stylesheet" type="text/css"
      href="yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" />
      <style type="text/css">
      background: #ccc;

      background-color: #fff;
      padding: 3px;

      top: 25px;
      border-bottom: 6px solid #a0a0a0;

      margin-top: 10px;
      #bd .yui-b { border: 1px solid #8d8d8d; background-color: #fff;}
      #topnav { margin-top: 14px; font-size: 16px; text-align: right; }
      <div id="header">
      <!-- must be yui-t3 to allow enough space for logo -->
      <div id="doc2" class="yui-t3">
      <div id="hd">
      <div id="yui-main">
      <div class="yui-b" id="topnav"><a
      href="http://www.mysite.com" title="Go Home">Home</a> | <a
      href="/search" title="Search">Search</a> | <a href="/people"
      title="People">People</a> | <a href="/companies"
      title="Companies">Companies</a> | <a href="/jobs"
      <div class="yui-b"><a href="http://www.mysite.com"><img
      src="images/logo.gif" /></a></div>
      </div> <!-- hd -->
      </div> <!-- doc -->
      </div> <!-- header -->
      <div id="hd-bar"><!-- bar --></div>

      <div id="doc2" class="yui-t2">
      <div id="bd">
      <div id="yui-main">
      <div class="yui-b">
      main content

      <div class="yui-b">
      <li>nav3 sub</li>
      <li>nav3 sub</li>
      <li>nav 4</li>
      <li>nav 5</li>
      </div> <!-- bd -->
      <div id="ft"><!-- ft --></div>
      </div> <!-- end doc -->