Quick CSS Question (Probably ;) )... Adding right border.

[zacdl]

I haven't done CSS in so long, I cannot figure this darn thing out to save my life.
Basically, I want the red to continue down the right side as a border between the two colors.

For the life of me, I cannot figure it out. Where do I stick my DIV at, and is this styling correct?

#right{
width:20px;
margin: 0 0 10px;
float:right;
background: #990000;
color: fff;
}

 

[Excavator]

Hello zacdl,
Some odd things your doing - nesting #page inside #container and .content inside .wide_column_top inside .wide_column_bottom... I can only assume your adding overlapping backgrounds later.
Also odd is #right ...not really doing anything right now.

Have you looked at it in FireFox the way it is now?


=================
To get your content in the middle I adjusted your widths. Have a look at this:
CSS

 body{
	font-family: Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #FFFFCC;
	color: #000;
}

h1, h2{
	font-family: Georgia, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #d26302;
}

a{
	text-decoration: underline;
	color: #c2ddef;
}

a:hover{ text-decoration: none; }

a img{ border: 0; }

p{ padding: 15px 0 0; }

[COLOR="red"]#container{
	width: 988px;
	margin: 0 auto;
	text-align: left;
}

#page{
	width: 988px;
	background: #990000;
	color: #fff;
overflow: hidden;
}

#header{
	width: 988px;
	margin-left: 5px;
}

#leftsidebar{
	width: 160px;
	margin: 0 10px;
padding-top: 10px;
	float: left;      /*positioning of sidebar*/
}[/COLOR]

#leftsidebar ul{
	margin: 0;
	padding: 0;    /*list styling and display for sidebar*/
	list-style: none;
}

#leftsidebar ul li h2{
	padding: 5px 7px;
	font-size: 12px;
	font-weight: bold;       /*header formatting for sidebar*/
	text-transform: uppercase; 
	background-color: #ffff88;
	color: #000000;
	}
	
#leftsidebar a:hover{
	color: #000000;
	text-decoration: none;
}

#leftsidebar ul ul{
	padding: 0px;     /*background for content under sidebar headers*/
	background: #990000;
}

#leftsidebar ul ul li{
	margin: 0;     /*text formatting for sidebar*/
	line-height: 24px;
}

#leftsidebar ul ul ul{
	padding: 0;        /*place right under parent list item*/
}

#leftsidebar ul ul ul li{
	padding: 0 0 0 10px;   /*sidebar list formatting*/
}

[COLOR="red"].wide_column_bottom, .wide_column_top{
margin: 0;
	background:#ffffff; 
	width: 628px;
	color: #000000;
overflow: hidden;
}

.content{
	margin: 10px 10px 0;
	padding: 15px;   
	width: 578px;
}[/COLOR]

.content a:link{
	color: #d26302;
}

.content a:visited{
color: #d26302;
}

#right{
	margin-top: 10px;
	margin-right: 0;
	width: 180px; 
	float: right;
	background: #990000;
 }

#footer{
	width: 988px;
	margin: 0 0 10px;
	float: left;
	background: #990000;
	color: #fff;
}

#footer p{
	padding: 10px;
}

I highlighted the changes in red.
To see why #content can only be width: 578px; read about the box model here.

I left the markup as it was. Hope that helps a bit.


Use the right DocType
Validate your markup
Validate your CSS
Why validating is good
Why tables are bad

 

[SKYflyer]

eek... take a look at it in firefox! it needs a bit of fixing...

 

[zacdl]

Hello zacdl,
Some odd things your doing - nesting #page inside #container and .content inside .wide_column_top inside .wide_column_bottom... I can only assume your adding overlapping backgrounds later.
Also odd is #right ...not really doing anything right now.
Have you looked at it in FireFox the way it is now?

Originally, I had rounded corners. Hence the wide_column_top and wide_column_bottom.
.content was designed to give a little header background on the <h1> headers- but all it does now is add a bit of padding and text color (hence why I renamed it header).

#right is what I was using to create the right column...

Haven't gotten far enough to check it in either Firefox or to validate it... I need to make sure I am happy with the way it looks before making it function with Firefox.

Let me ask you guys... Do you spend more time coding for FF or IE? The past few years (probably with IE7), I spend a heck of alot more time tweaking things to get it to work in FF.



There was also originally a right sidebar (heck, if you want to see how it looks, go to www.zaclohrenz.com I'm using my website template as a very rough start to this website) as well- this is why the content is a bit off right now.

Would centering the content fix the right border? I just need something 10px (maybe 20, I'll just have to see how it looks) wide along that right side, to differentiate the two colors.