CSS - Basic Css Problems

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

I have a CSS call for all p, like this

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}

now I want headings to be ital, so I add

p.ital {
font-style: italic;
}

and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold

p.italBold {
font-weight: bold;
}

That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this?

Thanks for your help

CJB

heya guys having some drama with what should be a simple task. basically i just want to expand the intro-left div to 100% without pushing the right hand content thats fixed.

Code:

<div id="intro" style="float:left; display:inline; border: 1px solid red; width:100%;">
		<div id="intro-left" style='float:left; border:1px solid green; overflow:hidden; width:auto;'>
			text
		</div>

		<div id="feeder" style="float:right; border: 1px solid black; width:200px;height:400px;">
			text
		</div>
</div>

I'm new to CSS and I am trying to create a style sheet for a website I am currently getting ready to begin production of and was trying to get my basic layout made up.

I was wandering if you guys could help me out because I keep getting a few concepts mixed up as I am going along through creating this and can't quite get it set up the way I want to.

I tried to comment my CSS so you guys could get a basic understanding of what I was aiming for. Don't worry about the odd backgrounds at the moment b/c I am just using them to easily identify my different divs.

Anyway, here is my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1014px; /* 1024px total with padding */
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
	padding-right: 10px; 
}

#accounttypeselector { /* select personal or business to affect page display */
	position: absolute;
	width: 100%;
	height: 25px;
	left: 0;
	top: 0;
	padding: 0;
	background: #ff00ff;
}

#servicesbar { /* container for user services */
	position: absolute; /* sitting up this way b/c will be contained within wrapper */
	width: 100%; /* with absolute positoning and being inside wrapper should be 100% of width of wrapper */
	height: 30px; /* 30px should be adequate height */
	padding: 0;
	background: #ffffff;
}

#servicesbar-services { /* container for user services once logged in */
	position: absolute; /* not sure if position for this is right - should be left side of servicesbar */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	padding: 0;
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	position: absolute; /* not sure if position for this is right - should be right side of servicesbar */
	width: 25%; /* want it to be 25% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */	
}

#header { /* will include site banner/logo */
	width: 1024px;
	padding: 0;
	background: #ff0000;
	background-image: "background.gif";  /* if I don't specify a height will this div take on the height of the image? */
}

#navmain { /* navbar that will be located below header */
	width: 1024px;
	padding: 0;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	padding: 0;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 70%;
	background: #66CDAA;
	padding:0;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 15%;
	background: #8A2BE2;
	padding:0;
}

#footer { /* footer to be located at bottom of wrapper */
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

And here is just my bareboned html where I was trying to put my divs together:

Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > </div>
			<div id= "servicesbar-login" > </div>
		</div>
		
		<div id= "header" > </div>
		
		<div id= "navmain" > </div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" > </div>
			<div id= "bodywrapper-main" > </div>
			<div id= "bodywrapper-news" > </div>
		
		</div>
	
	</div>
	
	<div id= "footer" > </div>
</body>
</html>

Can anyone offer me some suggestions to straighten me out here and also any tips if I am doing anything that isn't the accepted norm.

Thanks in advance and let me know if you have any questions as to what I am trying to do. Really appreciate it.

Nathan

Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right.
Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it
Thanks for reading

Hi guys, just dropping a line because I am having the darndest time trying to get this page:

http://www.againsttheline.com/college_football_links/

to look the way I want it to with the CSS the script developer included.

I have never personally used CSS myself, so I'm at a bit of a loss, but I have gone into the CSS file, changed what I though to be correct, but can never get the right results. I would like the categories in the middle of the page to be larger without changing the size of the rest of the links on the page. However, when I change "CatHeaderText" size it has no effect. If I change body text size it has no effect. The only thing that works when I change the font size is the a:link thing from xx-small but then that changes every link on the page and not just the category links in the middle.

Can anyone offer any ideas of how I can make this work?

Thanks,

John


Below is the full CSS

<style>
.bodytext {
font-family: verdana,arial,ms sans serif;
font-size: 10pt;
color: #000000;
}
a:link, a:visited, a:active {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
color: #70191B;
text-decoration: none;
}
a:hover {
font-family: verdana,arial,ms sans serif;
text-decoration: underline;
color: #800000;
}
.dotted {
border: 1px dotted #000000;
}
.catheadertext {
font-family: verdana,arial,ms sans serif;
font-size: l2pt;
font-weight: bold;
color: #000000;
}
.button {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
border-color: #909090;
background-color: #404040;
color: #FFFFFF;
}
.formtext {
font-family: verdana,arial,ms sans serif;
font-size: xx-small;
}
.poplisttext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 7pt;
}
.revheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
background-color: #5A636E;
}
.topborder {
border-top: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.bottomborder {
border-bottom: 1px solid #000000;
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
}
.description {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
color: #000000;
padding-left:20px;
}
.adminheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
}
.admintable {
background-color: #000000;
}
.adminmain {
background-color: #FFFFFF;
}
.subcatheadertext {
font-family: tahoma,verdana,arial,ms sans serif;
font-size: 9pt;
color: #800000;
}
</style>

Hi all!

New to the forum, hopefully somebody will be able to help me out with a problem I am having!

I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working

I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain.

URL

Basicaly, heres the idea.

Header
Main Content Container
Footer

The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this.

I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it!

Thanks in advance, hopefully I will be able to contribute to the forum in the future

Hey all,

I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work.

So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds.

What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has.

I just can't get it to work. Can anyone help me?

Thanks a lot.

Regards.

Hi all,

What does this mean?

H1 A:link { color:#fff }

- or -

.sectionhead H2 { font-size: 12px; }

I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question.

Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case.

I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions?

Thanks to anybody who takes the time to answer!

Laura S.

Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else.

The pages is at: http://www.webputzer.com

The .css file looks like this:

Code:

/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/



body {
margin: 0;
padding: 0;  
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}


#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}

#wrapper4{

}


#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}


#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}	


#header-inner{
margin:0;
padding:0;
}


		
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}	

#content-inner{

}

#main {
width: 550px; 
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}


#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;

}


#footer-inner{
background: #f2f2f2;
height: 50px;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{ 
float:right;
}

#credit{
text-align:right;
padding: 0 15px;
}

#credit p{
margin:0;
color:#777;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}

/*  ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}

h1{
	font-size: 190%;
}
h2{
	font-size: 160%;
}
h3{
	font-size: 120%;
}
h4{
	font-size: 130%;
}
h5{
	font-size: 100%;
}
h6{
	font-size: 70%;
}


a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
	font-size: 90%;
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
}

td{
 vertical-align:top;
}



#tabs {
  float:left;
  width:100%;
  font-size:90%;
	background:#000;
  line-height:18px;
	
	border-top: 1px solid white;
}


    #tabs ul {
	  margin:0;
	  padding:4px 10px 0 10px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      padding:5px 15px 3px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }  
	
	


/* Headings */ 

form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}

#header h3{
margin:  0;
padding: 30px 0 0 10px;
}

#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}

#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;

}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}


.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #333;
}

.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}

.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}


.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}


.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}




/*  Comments   */

h3#comments, h3#postcomment{
	font-size: 100%;
	font-family:verdana, sans-serif;
}	

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
	padding: 0px 3px;
	margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}

ul#commentlist li{
	display: block;
	padding: 0;
	margin: 0 15px 5px 15px;
	font-size:90%;
	background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
	width:50px;
	float:left;
	padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/*  sidebar styles */


#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}



.menu{
padding:0;
font-size:90%;
}

.menu a{
font-weight: 100;
}

.menu a:hover{
text-decoration:none;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}

.menu ul li.widget ul{
	margin: 0;
	padding:0;
}

.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}



.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know...

I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed.

Here is the code:

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<style type="text/css">
body {
	font-family:arial;
	font-size:10pt;
}
h1 {
	text-align:center;
	margin:0;
	padding:0;
}
div.letter {
	page-break-after:always;
}
.from {
	text-align:center;
}
.to {
	font-style:normal;
	margin-top:30px;
}
.date {

}
.footer {
	position:absolute;
	bottom:0;
}
		</style>
		<!-- compliance patch for microsoft browsers -->
		<!--[if lt IE 7]>
		<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
		<div class="letter">
			<h1>Stanley Road Baptist Church</h1>
			<address class="from">
				Stanley Road, Morecambe, Lancashire, LA3 1UP
			</address>
			<address class="to">
				Joe Bloggs
			</address>
			<p class="date">
				Friday 27th August 2004
			</p>
			<p>
				Dear Joe,<br />
				Blah blah blah.
			</p>
			<p>
				Yours sincerely,
			</p>
			<p>
				Matt Fletcher
			</p>
			<div class="footer">
				The Footer In Question
			</div>
		</div>
		<div class="letter">
                 ...
		</div>
		<div class="letter">
                 ...
		</div>
	</body>
</html>

I can get it to stick to the bottom of only the first page, but it doesn't appear on any others.

I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example:

<head>
<title>right position</title>
<style type="text/css">
#maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;}
.left {font-size: 2em;}
.right {padding-left: 350px}
</style>
</head>
<body>

<div id="maindiv">
<span class="left">hello world</span>
<span class="right">hi there</span>
</div>

</body>

This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths.

Thanks in advance,

CSS Newbie!

Hey guys,

I am brand new to these forums, this seems like a good place to ask for help. So I am a novice web designer, I use AdobE Dreamweaver CS3. I have designed and coded some websites quite successfully, but now I keep running to the same problem. I have made my layout and turned it into different divs on Dreamweaver. This is in a very basic early stage. Next I want to add content, and I know how to do that, but every time I have done that and I add more content downward outside of the original "content" div's borders, the whole layout sometimes gets screwed up. Here is the address to the basic website that only looks to be alright: vivanidesign.com/newvivani/design.html. Then as I add content, to this particular page, it overflows, as shown in this website: vivanidesign.com/newvivani/designfail.html. How can I fix this? How can I make the background content image follow the text, so it will move down with it? Not just the content div, but the sidebar div also.

Any help would be really great, I've tried to find out the answer to this for a while!

Thanks!