navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

Columns not lining up

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Columns not lining up
Page: [1]
 
Avick

 

Posts: 181
From: Ireland
Status: offline

 
Columns not lining up - 9/29/2004 11:43:30   
I am having a bit of a problem with my website that I just can’t find the answer to.

On some pages I have a number of left aligned boxes with the main content box on the right. There is a good gap between the left and right.

Here is my problem.

When I open pages where the left box is shorter then the right box, the text that extends past the left box is slightly out of line with the text above it. An example of this is on the profile page. The last row of text is not inline with the text above it.

http://www.newebirl.net/profile.htm

Another page is the email page. This page has two content boxes. The lower box is way out of line with the one above.

http://www.newebirl.net/mail.htm

Here is the style sheet. Can anyone see where I am going wrong….. cos I can’t.:)

body{ 
	background-color: #E0E0E0;
	margin: 0px;
	margin-top: 10px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 0.80em;
	margin:0px;
	margin-top: 10px;
	margin-bottom: 0px;	
	}

#main {
	width: 700px;
	width: 750px;
	padding: 10px;
	margin: 0px auto;
	background-Color:#BECDC0;
	border: 1px solid gray;
	}
	
#header {
	width: 100%;
	height: 110px;
	background-color: White;
	border: 1px solid #6f8878;
	}
	
#logo {
	width: 150px;
	padding-top: 20px;
	float: left;
	}
#headImage {
	background-color: White;
	float: right;
	}
	 
#leftContainer {
	width: 200px;
	height: 100%;
	text-align: left;
	float: left;
	margin-top: 10px;
	}

.nav {
	text-align: left;
	border: 1px solid #6f8878;
	background-color: #F2F2F2;
	padding: 5px 5px;	
	}
	
span.navTitle {
	width: 100%;
  	height: 10px;
	padding: 1px 5px;
	background-color: #FFF;
	background-image: url(images/layout/titlebg.jpg);
	background-position: left;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	border-top: 2px solid #CCC;
	text-align: left;
	font-size: 87%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #707070;
	font-weight: bold;
	}

span.navLink {
	width: 100%;
  	height: 10px;
	padding: 2px 5px;
	text-align: left;
	font-size: 87%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	}
span.navLink a { color: #629562;}
span.navLink a:hover {color: #FF8C00;}
	
#left1 {
	width: 200px;
	margin: 20px 0px;
	padding: 10px;
	background-color: #F2F2F2;
	border: 1px solid #6f8878;
	color: #707070;
	text-align: left;
	font-size: 0.87em;
	}
	
.content { 
  background:white url("images/layout/boxBG.gif") top right no-repeat;
  border: 1px solid #6f8878;
  border-top: 3px solid #6f8878;
  padding:20px;
  text-align: left;
  font-size: 95%;
  margin-top:10px;
  margin-left:280px;
  }
  
.content2 { 
  background-color: white;
  border: 1px solid #6f8878;
  padding:10px 20px;
  text-align: left;
  font-size: 0.87em;
  margin-top:5px;
  margin-left:250px;
  }
 
 .content3 { 
  background-color: white;
  border: 1px solid #ABABAB;
  padding:20px;
  padding-top: 0px;
  padding-bottom: 5px;
  text-align: left;
  font-size: 90%;
  margin-top:10px;
  margin-left:250px;
  }

.imgBoxL { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  }
  
 .textBoxR { 
  width: 200px;
  padding: 0px;
  text-align: left;
  margin-top:5px;
  float: right;
  }
  
 
p {color: #707070;}
p.p2 {line-height: 11pt;padding: 10px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p2 a:hover {text-decoration: underline;}

p.p3 {line-height: 10pt;padding: 5px 0px 0px 0px;margin: 0px 0px 0px 0px; text-align: justify;}
p.p3 a:hover {text-decoration: underline;}

a {text-decoration: none;	color: #FF8C00;}
a:hover { text-decoration: none; color: #8FBC8F;}
 
 

h3 {font-size:105%; color:#86777e;font-weight:bold;margin-bottom:0px;border-bottom:1px solid #ccc;}

ul {color: #707070; list-style: square;}
.list1 {	line-height: 14pt; }


td { font-size: 0.80em;}















#footer {
	width: 100%;
	margin-top: 5px;
	background-color: #D7E1D7;
	border: 1px solid #6f8878;
	float: left;
	color: #6B6B6B;
	font-size: 8pt;
	padding: 5px;
	}

	
.valid {
	width: 700px;
	width: 750px;
	margin-top: 5px;
	color: Gray;
	font-size: 0.72em;
	padding: 0px;
	}
.valid a {text-decoration: none; color: Gray;}
.valid a:hover {text-decoration: underline; color: #5A5A5A;}


_____________________________

Alan
http://www.newebirl.net
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Columns not lining up - 9/30/2004 10:58:32   
Hi Alan,

Try adjusting/removing the padding that you have in there. I thought that maybe the problem was with the text align center, but it seems that you have that covered with the text-align: left;

I don't notice anything, but someone more trained then I am might notice it. Donkey is usually pretty good at picking out these things.

btw, I looked at this in IE and all seems to be ok, the problems are when you view in the geko browsers. Try, if you can, viewing your pages in the geko browsers as you go along. Then make your adjustments for IE.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Avick)
Avick

 

Posts: 181
From: Ireland
Status: offline

 
RE: Columns not lining up - 9/30/2004 11:11:29   
Thanks
I will try that and see how I get on.

_____________________________

Alan
http://www.newebirl.net

(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Columns not lining up - 9/30/2004 11:51:21   
Good, let us know how you make out with it.

I'll check back in later on and see how you are doing. I have some studying to accomplish for a cssp class I am in right now. Good luck

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Avick)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Columns not lining up - 9/30/2004 14:06:18   
Additonal information regarding this thread can be found Here

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to c1sissy)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Columns not lining up
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts