CSS - New Css Layout Method - No Divs Used

Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code:
Code:

<div style="position: absolute; top: 0px; left: 0px; width: 260px;">
<a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div>
<div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;">&nbsp;</div>

Right now the header extends the browser width. Thanks in advance!

I'm currently working on a new blog and am trying to make this layout http://danbeckett.co.uk/newl.gif, but as this is my first real foray into CSS I'm not having much luck.

I know that for the curves I'll need to use images, but it's getting them inline, and finding a way to make the (slightly) light(er) blue to stretch across as with the border.

Here's what I have so far: http://danbeckett.co.uk/blog.htm
and the CSS: http://danbeckett.co.uk/blog.css

It looks better in FF than IE, in IE it really is a mess.

If anyone can help me with this I would really appreciate it,

Thanks - Dan.

Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs:

Code:

___________________
|Image 1 |Text    |
|Image 2 |Text    |
|        |Text    |
|        |Text    |
-------------------

Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'.

Outer 'table' style: None (just a plain <div>)
Images 'cell' style: height:100%;float:left
Text 'cell' style: height:100%

Here's the full code if you want it:

Code:

<div>
  <div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
      <img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
  <div style="height:100%"> [div 2] Shows text on the right <br>
      <br>
    continues downwards no matter how much text appears<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    Even down here [/div2] <br>
  </div>
</div>

This works great in i.e. but not mozilla, anyone have any ideas?

Hi. I am a relative CSS newbie working on a new layout. My intended format is: A sidebar (a div with no visible border) containing a set of smaller divs. A main div for the content on the right. About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is:
Code:

<div class="sidebar">
  <div class="cv">
    <font size="3"><b><center>
      Current Version Info
    </center></b></font>
  </div>

  <div class="ver">
    <center>
      Version:
      <br/>
      <b>0.0.0</b>
    </center>
  </div>

  <div class="rel">
    <center>
      Released:
      <br/>
      <b>00/00/00</b>
    </center>
  </div>

  <div class="nav">
  </div>
</div>

<div class="main">
  <center>
  Lorum ipsum
  </center>
</div>

The relevant CSS code is:
Code:

div.sidebar {
    width: 202px;
    float: left;
    border: 0px solid #00CC99;
}

div.cv {
    width: 200px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.ver {
    width: 99px;
    border: 1px solid #00CC99;
    float: left;
    background-color: rgb(33,33,33)
}

div.rel {
    width: 99px;
    border: 1px solid #00CC99;
    float: right;
    background-color: rgb(33,33,33)
}

div.nav {
    margin-top: 30px;
    width: 200px;
    height: 100px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.main {
    width: 500px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33);
    float: right;
}

In particular, div.main and div.sidebar are the ones giving me trouble.
What would you recommend?

Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it.

this should be simple, but i just don't seem to have the hang of css yet

what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css

the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it

maybe just looking at what i have will help more

the HTML

Code:

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

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

and the css

Code:

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

those funky colors are so i can see the divs

I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9.

It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up.

It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.


Here is the code (this is not the whole code--this is the code I think would effect the layout):

body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
top: 1px;
}
#main {
width: 100%;
margin-top: 10px;
}
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}

Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (:

I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong. Code:

<html>  <head> <!--[if IE]> <style type="text/css">  #container div {display:inline;}  #ul_top li {display:inline;}  #header p {display:inline;}  #main_content div {display:inline;}  #recreation div {display:inline;}  </style> <![endif]-->   <style type="text/css">  body {padding:0px;       margin: 20px 0px 0px 20px;      }   h1 {color:#990D0D;     font-size: 20px;     text-indent: 40px}  		#limiter {width: 1003px; }  #ul_top {margin:0px; text-align:right; 	}  #ul_top li {display:inline-block; zoom:1; 	    padding: 0px 5px 0px 0px;  	     	   }  #ul_top li a {color:#000;  	      text-decoration:none; 	      font: veranda; 	      font-size: 11px; 	     }  #ul_top li a:hover {color:#DE6800;  	      	    text-decoration: none; 	      	    font: veranda; 	      	    font-size: 11px; 	     }   #container {border: solid #000 1px;  	    background: #FFF url('background.jpg'); 	    text-align:left; 	    width: 1000px; height: 750px; 	   }   #header {width:1000px; height:303px; 	 background:#yellow url('red_rock_header.jpg') no-repeat; 	} #header p {display:inline-block; zoom:1; 	   font-size: 20px; 	  }  p.company_name:first-letter { color:#990D0D;  			      font-size:40px; 			    }    #main_content div {display:inline-block; vertical-align:top; zoom:1;}  #recreation {width:430px;}  #recreation div {display:inline-block; vertical-align:top; zoom:1;}   #text_holder{ border-right: dashed black 1px; 	      padding:15px; 	      width: 375px;}    a.rec_links {color:#DE6800; 	     font-size: 18px; 	    }   a.rec_links:hover {color:#000; 	     	   font-size: 18px; 	    	  }  a.pic_links { display:block; 	      position: relative; 	      width: 200px; height: 160px; 	     }  #climbing {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('climbing.jpg') no-repeat; 	    	  }    #bicycling {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('bicycling.jpg') no-repeat; 	    	  }   #hiking {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('hiking.jpg') no-repeat; 	    	  }   #wildlife {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('wildlife.jpg') no-repeat; 	    	  }    p.discription {font-size: 12px; 	       text-indent: 20px; 	       }   </style> </head>  <body>   <div id="limiter">  	<ul id="ul_top">  	<li><a class="mini_link" href="#">Contact us</a></li> 	<li><a class="mini_link" href="#">Area Map</a></li> 	<li><a class="mini_link" href="#">About us</a></li> 	</ul>  <div id="container"> <div id="header"> 	<p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> 	  </div>	  <div id="main_content">  <div id="text_holder">  	<h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p>  </div>  <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div>    <div id="recreation">   	<div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> 	<div id="climbing"> 	 		<a href="#" class="pic_links"></a> 		 	</div> 	</div> 	  	<div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> 	<div id="bicycling"> 	 		<a href="#" class="pic_links"></a>		 	 	</div> 	</div>    	<div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> 	<div id="hiking">  		<a href="#" class="pic_links"></a>  	</div> 	</div>  	<div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> 	<div id="wildlife">  		<a href="#" class="pic_links"></a> 	 	</div> 	</div>  </div>  </div>	   </div>    </body> </html>

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?