How do you make a website a fixed width?

I am currently building a hobby website with the help of the book; “Build your own website the right way”.

The website I am building under it’s instructions expands to fill the browser.

If I wanted to fix the width of the website and center it, how would I do that?

Also how would I apply a colour, such as grey, to the area outside the website?

What are the pros and cons of fixed width vs an expanding website?

It would probably help if I posted my site I guess :rolleyes:

www.betting-resource.com

I wrote an entire post for you and then my browser refreshed, so I apologise if I am frustrated.

A layout is fixed because in the css the width and the height units are pixels.
Therefore if the device has a resolution with less pixels than the width of the element that one wants to see or with of the entire site, it will not be able to view it.

This is where liquid layouts come in. In my expirence, I have used them for smaller resolutions and mobile devices. Liquid layouts use % as units for the width and height. Therefore, regardless of the resolution size, the element will take up a certain % of the screen.

Here is some information with benifits and fallbacks of both.

This is a fixed layout example:

<!Doctype HTML>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>fixed layout</title>
          <style>
          /* This is a comment it is not read by any browser
          This is where the css styling goes */

          body{
                   color:#000;
                   background-color:#fff;
          }

           #container{
                  /*Styling for any element with the id="container" */
                          width:1000px; /* The width is fixed by pixels */
                           height:800px; /* The height is fixed by pixels*/
                           color:#fff;
                            background-color:red;
            }
          </style>
     </head>
     <body>
          <div id="container">
                 <p id="content"> I have a fixed width so you can only see me and the body if your monitor has enough pixels. Otherwise you will just see me, the container</p>
          </div>
     </body>
</html>

When this html is ran in a browser. If the resolution is less than 1000px in width or 800 px in height; such as, the 800px X 600px resolution, then one will not see the white-body, only whatever they can see of the red contianer-div.

Here is an example of a liquid layout:

<!Doctype HTML>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>liquid layout</title>
          <style>
          /* This is a comment it is not read by any browser
          This is where the css styling goes */

          body{
                   color:#000;
                   background-color:#fff;
                   width:100%; /*The body is naturally a 100% of the browser window space, but let us just write it to make sure */
          }

           #container{
                  /*Styling for any element with the id="container" */
                         width:92%; /* The width is liquid by screen-percentage*/
                         height:80%; /* The height is liquid by screen-percentage*/
                         color:#fff;
                         background-color:red;
            }
          </style>
     </head>
     <body>
          <div id="container">
                 <p id="content"> I am a liquid layout. As you can see regardless of what screen-resolution size you look at me in, I will always fit. In other words, you will aalways see the white body and the entire red-container. You could only see this in the fixed layout if the screen-resolution or browser-window was big enough.</p>
          </div>
     </body>
</html>

I hope that helps or is an okay intorduction to fixed and liquid layouts.

Hi,

I think I can handle this one. Give your outer most div a fixed width (in px) and center it with margin:auto. To color the outer area give the body a color… body{background:red;}

I thought I would need to do it on the CSS sheet to sytle all the pages the same way?

To make the outermost object, the body, the colour grey then you would set the background colour to the colour gray you would set it to grey where I set it to white. Let us use the hex code #BABABA
A complete list of hex codes with the numbers they represent are here

So in the fixed layout, the css stlying for the body would be:
body{
color:#000;
background-color:#BABABA;
}

and the same for the liquid layout because changing the background-color does not effect a layout’s liquid for fixed properties.

you can put it in a seperate stylesheet and you should. It was my mistake. Copy the styling wihtout the html <style> tags into a .css file and like it properly.

all in all

Fixed layouts use px as the units for width and height
liquid layouts use %'s as the units for width and height.
To change the outermost element, the body, 's colour to grey than add this to the stylesheet:

body{
        background-color:#BABABA;
}

You can use any shade of grey, just relace the BABABA with said shade of grey’s hex code.

To make something centreed:
use margins. Do not use align:center; This is outdated.
Apply margin:0px auto 0px auto to whatever element you want to be centred.
If you want the entire site to be cnetred then you only have to apply the margin to a container which contians the entire site.

In the example, I gave you above if #contianer is the contianer that contians the enitre site or what you want to be centred then add this to the stylesheet:

#contianer{
                margin:0px auto 0px auto;
}

margin:0px auto 0px auto; is just short hand for
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;

And becuase top & bottom and left & right have the same values, you cna shorten it even more to
margin:0 auto;

Both of those short-hand and the long-hand version are supported eually and everywhere. It is jsut easier to type :slight_smile:

Hope that all helps!

Regards,
Team1504

As a note, I would recommend NOT setting a height on boxes with content like text, ever. Unless you’re doing a fancy CSS trick : )

Revolution, go ahead and take some examples of team’s code and play around with it.

He used internal <style> tags because if your demo is just one page, it’s easier to show… so you can practice with either setup (until you have more than one HTML file of course… then move it out to separate CSS file).

Look in all browsers and just change stuff in his code and see what it does.

Lloyd’s book is excellent, but it’s also just the very tip of everything. All the weird and unexpected things you come across as you go beyond Lloyd’s book is what you learn further from.

Another side note: fixed-width sites are usually somewhat less awesome than fluid sites like you’ve built from Lloyd’s book, mostly because screens who are too small get a scrollbar and screens who are too big get the little strip in the middle (I made my site flexible but with a max-width of 1400px or something… and on one of those giant 27" Mac screens at the store, it was just a little strip in the middle : )

Yes of course, if you have a multiple-page site then please use an external stylesheet. I did it in the same page for simplicity.

I love my 27" iMac :slight_smile: For development sometimes, I only use the maximised window. Most users of the 27" iMac do not always browse web in a maximised window. Usually, I use half and the other half I have text-wranlger (text editor for mac) and finder open.

Regards,
Team 1504

For development sometimes, I only use the maximised window. Most users of the 27" iMac do not always browse web in a maximised window. Usually, I use half and the other half I have text-wranlger (text editor for mac) and finder open.

Yeah that’s generally the reason to have such a ginormous screen, but I notice I’m not the only one who full-screens a lot and just flicks between tabs to reach applications. And in the stores, of course, the browser automatically maximises : )

The first time I used an iMac, I thoiught you could only have maximised windows. :lol: Which is nice but bad for smaller fixed websites.

Are you not supposed to use a wrapper?

In the code examples above, the div called #container has been acting as the wrapper.

To center a site all you need is some single element who is a child of the <body> who contains everything else. That element can then have a set width and the automargins.

Although, you can have multiple elements as children of the <body> and make it a centered site… just, each of those elements have the same width and automargins too.

When you learn about sticky footers (not fixed footers) you’ll see why sometimes you want to take elements out of the page wrapper, but in general, a page wrapper is common and cool.

What the user sees outside the centered site is either the background of the <body> element, or of the <html> element. Most of the time it doesn’t matter which, and the <body> is most commonly used.

Sorry to keep asking questions.

OK I altered the CSS sheet and the index.html page.

I put the following in the CSS sheet;

#contianer{
  margin:0px auto 0px auto;
  width: 850px;
} 

And then I put the following just inside the body tags in index.html;

 <div id="contianer">

and closed the tag at the end of the document of course.

As you can see, it has had a somewhat interesting effect on the page…

Not easy this CSS stuff I have to admit!:lol:

Hmmm sorry to bump this thread again, I tried various things but only ended up making a total mess of the page.

Any ideas?

I have reworked your code, particulary the CSS. I left a red border around the body text so that you can see its extent. All elements are positioned absolutely on the page. The container (I corrected the typo) is centered using auto margins. I hope it helps with the learing process.


<!doctype HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Positioned Layout</title>
</head>

<body>

<div id="container">
  <div id="header">
    <div id="sitebranding">
      <p class="a24W">Betting-Resource.com
    </div>
    <!-- end sitebranding -->
    <div id="tagline">
      <p class="a18W">Find the best places to bet!</div>
    <!-- end tagline -->
  </div>
  <!-- end header -->
  <div id="navigation">
    <ul class="dwn">
      <li><a href="http://www.betting-resource.com/index.html">Home</a> </li>
      <li><a href="http://www.betting-resource.com/about.html">About Us</a> </li>
      <li><a href="http://www.betting-resource.com/bingooffers.html">Bingo
      Offers</a> </li>
      <li><a href="http://www.betting-resource.com/contact.html">Contact Us</a>
      </li>
      <li><a href="http://www.betting-resource.com/gallery.html">Image Gallery</a>
      </li>
    </ul>
  </div>
  <!-- end navigation  -->
  <div id="bodycontent">
    <h2>Welcome to Betting-Resource.com </h2>
    <p>Text here Text here Text here Text here Text here Text here Text here
    Text here Text here Text here Text here Text here Text here Text here.
  </div>
  <!-- end of bodycontent div -->
</div>
<!-- end container -->

</body>

</html>


 body
{   	background-color: white;
	margin-top:3px;
	margin-left:0px;
	text-align:center;	
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
#container
{   position:relative;
    top:0px;
    left:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width: 850px;
}
#header
{  position:absolute;
     top:0px;
     left:0px;
	width: 100%;
	height:80px;
	background-color:#000;
}
#sitebranding
{   position:absolute;
     top:10px;
     left:0px;
     text-align:left;
	background-color:#000;
	margin:0px 10px;
}
#sitebranding p
{   margin:0px;
}

#tagline
{ position:absolute;
   bottom:0px; left:0px;
   width:100%;
   height:25px;
   background-color: #1b91e0;
   font-family: Georgia, Times, serif;
   font-size:18px;
   color: white;
}
#tagline  p
{ margin:0px 0px 0px 10px;
  text-align:left;
}
#navigation
{   position:absolute;
    top:80px;
    left:0px;
    background-color: #000;
    width: 180px;
    height: 484px;
}
#navigation a:link
{ font-size:14px;
   font-weight:bold;
   color:#FF0;
   text-decoration:underline;
 }
#navigation a:visited
{ font-size:14px;
 font-weight:bold;
  color:#FFF;
  text-decoration:underline;
}
#navigation a:hover
{ font-size:14px;
  font-weight:bold;
  color:#F00;
  text-decoration:underline;
 }
 #bodycontent
 { position:absolute;
   left:190px;
   top:120px;
   border:1px solid red;
   width:660px;

 }
.a18W
{   background-color: #1b91e0;
	color: #FFF;
	font-size: 18px;
	font-weight:bold;
}

.a24W
{   	background-color: #000;
	color: #FFF;
	font-size: 24px;
}
.dwn
{ margin:10px 10px;
  padding:0px;
  list-style:none;
}

I don’t want to devaluate your input but I.M.H.O I think that using absolute positioned elements is not the way to go. I guess this would be better


<!doctype HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Positioned Layout</title> 
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

body {
    background-color: white;
    text-align:center; /*Only needed for IE 5/5.5 */ 
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

#container {
    width: 850px;   
    position:relative;
    margin: 0 auto;
    overflow: hidden;
    text-align:left;
}

#header{
    width: 100%;
   /*  height: 80px; take out height. Is created by its content */
    position: relative;  
    overflow: hidden;
    background-color:#000;
}

#sitebranding {
    width: 830px;
    height: 35px;
    margin: 10px 10px;
    float: left;
    text-align:left;
}

#sitebranding p {   
    margin:0px; 
}
 
#tagline {
    width:850px; 
    height:25px;
    float: left;
    background: #1b91e0;
    font-family: Georgia, Times, serif;
    font-size:18px;
    color: white;
}

#tagline  p { 
    margin-left: 10px; 
}

#content-wrapper {
    width: 850px;
    overflow: hidden;
}

#navigation {
    width: 180px;
    height: 484px; /* For demonstration purpose only */
    margin-right: 10px;
    padding-top: 20px;  
    float: left;
    display: inline; /* Avoid double margin in older IE browsers */
    background: #000;
}

#navigation a { 
    font-size:14px;
    font-weight:bold;
    color:#FF0;
    text-decoration:underline;
 }
 
#navigation a:visited { 
    color:#FFF;
    text-decoration:underline;
}

#navigation a:hover,
#navigation a:focus { 
    color:#F00;
    text-decoration:underline;
 }
 
#bodycontent {
    width:658px; /* width: 660px incl. borders */
    float: left;
    margin-top: 20px; 
    border:1px solid red;
}

.a18W { /*try to avoid naming id's and classes like this */
    background-color: #1b91e0;
    color: #FFF;
    font-size: 18px;
    font-weight:bold;
}
 
.a24W {/*try to avoid naming id's and classes like this */
    background-color: #000;
    color: #FFF;
    font-size: 24px;
}

.dwn { /*try to avoid naming id's and classes like this */
    margin:10px 10px;
    padding:0px;
    list-style:none;
}

</style>
</head>
 
<body>
 
<div id="container">
  <div id="header">
    <div id="sitebranding">
      <p class="a24W">Betting-Resource.com
    </div>
    <!-- end sitebranding -->
    <div id="tagline">
      <p class="a18W">Find the best places to bet!</div>
    <!-- #tagline -->
  </div>
  <!-- #header -->
  
	<div id="content-wrapper">
  <div id="navigation">
    <ul class="dwn">
      <li><a href="http://www.betting-resource.com/index.html">Home</a> </li>
      <li><a href="http://www.betting-resource.com/about.html">About Us</a> </li>
      <li><a href="http://www.betting-resource.com/bingooffers.html">Bingo 
      Offers</a> </li>
      <li><a href="http://www.betting-resource.com/contact.html">Contact Us</a>
      </li>
      <li><a href="http://www.betting-resource.com/gallery.html">Image Gallery</a>
      </li>
    </ul>
  </div>
  
  <div id="bodycontent">
    <h2>Welcome to Betting-Resource.com </h2>
    <p>Text here Text here Text here Text here Text here Text here Text here 
    Text here Text here Text here Text here Text here Text here Text here.
  </div>   
    
  </div>
  
  </div>
<!-- #container -->
 
</body>
 
</html>

I agree with donboe about the absolute positioning BUT it is useful to look at how Allan used it because there are times (special times) where you need to do that and it IS useful to see how that works together.

Absolute positioning gets less and less brittle the more you confine it to small relatively positioned parents. It becomes more brittle as you use it to contain text-elements (since I may need to enlarge text which means text may grow and cover some other positioned element underneath or to the side) and as you use it for larger page elements.

For page centering alone, no positioning is needed at all.

I would like to see Revolution’s total HTML and CSS after the attempt at adding a wrapper elements… so I can see what made the results “interesting”.

It’s still up at http://www.betting-resource.com/.

I’ve been playing around with the code quoted by everyone on this thread, but offline, so the “interesting” results are still there (the home page being kind of screwed up).

I’m not looking to become a professional web designer, all I realy want to be able to do is build a functioning site with a header, navigation, content area and also a footer (this is something missing from “build a website the right way”.

I’m somewhat confused by all this code at the moment, I am begining to think I would be better off getting a template rather than trying to build it totally myself?

No, you’ll have much better code doing it yourself.

Your problem is now indeed all the positioning. It lets stuff overlap everywhere, because none of those boxes can see each other. Absolute positioning is blind to everything except its nearest positioned ancestor… or if there isn’t one, the viewport.

Tomorrow I will make a copy of your page and make a straight version. It’ll be simple, so you’ll get it right away.