CSS Repeating DIV Blocks, 2+ columns

I would like to create a CSS/HTML page that looks like the attached template.

I need to create this without using images - I need to use only div tags, background colors, positioning (absolute, relative, static, etc.). I've attempted this myself and have ran into various problems. So, rather than trying to fix my attempt, I'd rather a fresh pair of eyes/hands create the code from their more experienced perspective.

Can anyone attach code that accomplishes precisely what is in this template?
template1.jpg
webdude77Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

webdude77Author Commented:
Here is an attempt at getting a better version of the template to appear. If you click and save, either of these should look fine. Please be aware that there are subtle grey lines that do not appear in the Experts-Exchange window above. You must click and save/view the image.
template1.jpg
0
Doc_McAlisterCommented:
As a general approach.

1 - Set the background of the body element to that light grey (stripe image?).

2 - make a frame div around everything in your body.  Use it to position your other divs the right distance from the top, left, and right of the page.

3 - Make a main area div that is white background and grey border.  It goes in the frame div floating left.  Set its width to the desired % or pixel width.  Leave enough room in the frame to the right of #main for your link tabs.  If you give the frame div a temporary border you can eyeball the spacing.

4 - The link tabs are made of 3 elements.  The outer Div is the dark grey box.  The first inner div is a left floating green box as tall as the grey box with a left margin that leaves some space between it and the left side of the grey box.  The second inner div is just a container for the text.

<div class="outer">
    <div class="greenStripe">
    </div>

    <div class="linkText">
        Link
    </div>
</div>

Place as many tabs under the #main div in the html as you have room for.  #main has to go above them in the body cause main is floating left.

0
webdude77Author Commented:
I gave it a try, but float wasn't working quite right. So, I tried position: relative, static, absolute and fixed. A test page is here:

http://www.stardeck.com/help/try1.htm

Any ideas on how to best match the code with the template image?

Also, the code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS Page</title>
 
<style type="text/css">
	
	body {
		margin:10px 10px 10px 10px;
		background: #efefef;
		font-family: Arial;
		font-size: 16px;
		}
	
	p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
	
	#wrap {
		position: static;
		}
 
	#banner {
		position: static;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		margin:0px 0px 10px 0px;
		}
 
	#maincontent {
		position: static;
		width: 600px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		}
		
	#maincontent p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
 
 
	#rightside_a {
		position: relative;
		top: 55px;
		left: 621px;
		width: 30px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 0px solid #999;
		padding:0px 0px 0px 0px;
		background: #666;
		margin:0px 0px 10px 0px;
		}
 
	#rightside_b {
		position: absolute;
		left: 31px;
		width: 30px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:0px 0px 0px 0px;
		background: #339933;
		margin:0px 0px 10px 0px;
		}
		
	#rightside_c {
		position: relative;
		left: 80px;
		width: 100px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #666;
		color: #fff;
		margin:0px 0px 10px 0px;
		}
 
</style>
</head>
 
<body>
 
<div id="wrap">
<!-- Begin Content -->
 
<div id="banner">
<p>Banner/Header</p>
</div>
 
<div id="maincontent">
<p>We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. </p>
<p>We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. </p>
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 1</p></div>  
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 2</p></div>  
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 3</p></div>  
</div>
 
 
<!-- Begin Content -->
</div>
 
</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

webdude77Author Commented:
I am getting closer. Here is a preview page (please view source for source code).

http://www.stardeck.com/help/try2.htm

For some reason, I needed to use a negative value for things to line up nicely (top: -35px;). Also, I am trying to figure out how to make the left "main content" area to be fluid, and the right side to be fixed. Similarly, I'd like each of the gray "Link" boxes to be at least a height of 25px, but more if the line wraps onto two.

Not sure how to accomplish these 2 things and fix that negative value...
0
Doc_McAlisterCommented:
What do you mean by "appear to be fluid"?  You want it to scroll while the other side does not?


You don't need so much absolutism.  And the tags you have there aren't in the


<div class="outer">
    <div class="greenStripe">
    </div>

    <div class="linkText">
        Link
    </div>
</div>

format.  You have nested bits there.  Below is a stripped down version.

Also, # id's are for singletons ... things there are only 1 of.  "." class attributes are for things there are many of like the rightsideA's.  

This will make the grey and green color stretch to height because the grey is the background of the entire tabby thing and the green has a height 100% directive so it will stretch.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>CSS Page</title>
 
<style type="text/css">
 
body {
		margin:10px 10px 10px 10px;
		background: #efefef;
		font-family: Arial;
		font-size: 16px;
		line-height: 18px;
		}
	
	p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
	
	#wrap {
		width: 800px;
 
		}
 
	#banner {
		width 600px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		margin:0px 0px 10px 0px;
		}
 
	#maincontent {
		float:left;
		width: 600px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		}
		
	#maincontent p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
 
	.Spacer {
		height: 5px;
	}
 
	.rightsideA {
		width: 150px;
		margin-left:612px;
		margin-top: 10px;
		height: 25px;
		background: #666;
		}
 
	.rightsideB {
		float: left;
		top: 0px;
		width: 15px;
		height: 100%;
		margin-left: 15px;
		margin-right: 10px;
		background: #339933;
		}
		
	.rightsideC {
		float:left;
		color: #fff;
		line-height: 25px;
		}
 
</style>
</head>
 
<body>
 
<div id="wrap">
 
	<div id="banner">
			<p>&nbsp;</p>
	</div>
 
	<div id="maincontent">
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
	</div>
	
	<div Class="Spacer"></div>
 
	<div Class="rightsideA">
  		<div Class="rightsideB"><p>&nbsp;</p></div>
  		<div Class="rightsideC"><p>Link 1</p></div> 
	</div>
	
	<div Class="rightsideA">
  		<div Class="rightsideB"><p>&nbsp;</p></div>
  		<div Class="rightsideC"><p>Link 1</p></div> 
	</div>
	
	<div Class="rightsideA">
  		<div Class="rightsideB"><p>&nbsp;</p></div>
  		<div Class="rightsideC"><p>Link 1</p></div> 
	</div>
</div>
 
 
</body></html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webdude77Author Commented:
For the fluidity, I meant that I wanted the "maincontent" area to stretch as wide as possible, while the "rightside" has a fixed width of 150. So, if it we were using tables to make this page, we would have:

<table border="1" width="100%"><tr><td>&nbsp;</td><td width="150">&nbsp;</td></tr></table>

The code you posted works pretty well. One thing that seems to respond strangely is the ".Spacer" class. It has a value of 5 px, but looks like more than 5. When I put in 1 px, it looks more like 5. When I change it from 1 to 0, it seems to jump 5 pixels.

Any suggestions for these 2 issues?
0
Doc_McAlisterCommented:
The banners padding of 5 px extends below the banner and the spacer pushes off that.  So it is behaving as expected.

For making the main area stretch start removing width attributes or setting them to 100%.  Start with the wrap div and move in.

For more detail I'd make another question.  This is out of the scope of the initial question (making the tabs without using images).  

Good luck.
0
webdude77Author Commented:
Answer accepted, points awarded. Thanks Doc McAlister!

The second part to this question (fluidity like that of a table) has been posted as a second question:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23354904.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.