How Do I Do This?

seonewbee · #1 (**permalink**) 09-29-2004, 03:25 PM

This is my latest design for my site. After I figure this out, I have to fit it into the php template. I am trying to create a page that is tables without having tables at all in the design. I have only seen very simple designs as tutorials on css design with divs My problem is that when I get the left col div to scroll the content when it is longer than the height of the div the alignment of the divs is lost and they are placed so as to stagger left and right content. I want left and right content to top align. If one is longer than the other I have created a special div that fixes that so the next set will be top aligned - it is like a table row tag in html. Any ideas on how to make the divs line up in the left col. I have not tried it out in IE, only Firefox and Mozilla. Thanks in advance for your assistance.

This is the code for the page:

Code:

  <HTML>
  <head>
  <link rel=&quot;stylesheet&quot; href=&quot;styles2.css&quot; type=&quot;text/css&quot;>
  </head>
  <BODY>
  <div id=&quot;frame&quot;>
  	<div id=&quot;header&quot;>header area
  	<div id=&quot;table&quot;>
  		<div id=&quot;lcol&quot;>
  		<div class=&quot;center&quot;>content here content here contebnt here content here content here
  			<div class=&quot;left&quot;>content left here
  			<div class=&quot;right&quot;>content right here
  		<div class=&quot;center&quot;>content here content here content here content here content here
  			<div class=&quot;left&quot;>content left here
  			<div class=&quot;right&quot;>content right here
  		<div class=&quot;center&quot;>content here content here contebnt here content here content here
  			<div class=&quot;left&quot;>content left here
  			<div class=&quot;right&quot;>content right here
  		</div>
  		<div id=&quot;rcol&quot;>
  			<div style=&quot;padding-left: 20px;&quot;>
  		<iframe id=&quot;scrollinghead&quot; src=&quot;smiley.html&quot; width=&quot;180px&quot; height=&quot;25px&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; hspace=&quot;0&quot; vspace=&quot;0&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;>
  
  		 <iframe id=&quot;scrollingtext&quot; src=&quot;smileys.html&quot; width=&quot;180px&quot; height=&quot;150px&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; hspace=&quot;0&quot; vspace=&quot;0&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;>
  			</div>
  		</div>
  	</div>
  	<div id=&quot;footer&quot;>footer text</div>
  </div>
  </BODY>
  </HTML>

This is the code for the css.:

Code:

   body {
   	margin: 0;
   	border: 0;
   	padding: 0;
   	font-size: 12pt;
   	background: url(../images/bckgr-tile.jpg) #b20000 repeat;
   	line-height: 130%;
   	color: #000000;
   }
   div#lcol div.center {
   	padding-left:20px;
   	padding-right:20px;
   	max-width:500px;
   	text-align:justify;
   	position:static;
   	vertical-align:top;
   	clear:both;
   }
   div#lcol div.left {
   	padding-left:20px;
   	max-width:240px;
   	text-align:justify;
   	position:static;
   	vertical-align:top;
   }
   div#lcol div.right {
   	padding-right:20px;
   	max-width:240px;
   	text-align:justify;
   	margin-left:280px;
   	float:left;
   	position:static;
   	vertical-align:top;
   }
   #frame {
   	width:760px;
   	margin-right:auto;
   	margin-left:auto;
   	padding:0px;
   
   }
   #header {
   	background-color: #b20000;
   	color: #FF0000;
   	padding-left: 20px;
   	padding-bottom: 10px;
   	font-weight: bold;
   }
   #table {
   	background-color: #faafb6;
   	vertical-align:top;
   }
   #lcol {
   	overflow:auto;
   	float:left;
   	position: absolute;
   	height:450px;
   	width:550px;
   	vertical-align:top;
   }
   #rcol {
   	vertical-align: top;
   	background-color: #b20000;
   	color: #ffffff;
   	width:200px;
   	position: absolute;
   	float:left;
   	left:560px;
   }
   #footer {
   	background-color: #b20000;
   	color: #FF0000;
   	padding-left: 20px;
   	padding-bottom: 10px;
   	font-weight: bold;
   	clear:both;
   }

Jazzee · #2 (**permalink**) 09-29-2004, 04:36 PM

I'm not sure I understand the question.

seonewbee · #3 (**permalink**) 09-29-2004, 07:09 PM

How to make the left and righr content areas in the left col areas line up? The left and right are staggered when viewed in Firefox or Mozilla. For some reason the left and right content areas of the left col are clearing each other. Hope that you understand me.

Jazzee · #4 (**permalink**) 09-29-2004, 07:33 PM

Do you have a link?

seonewbee · #5 (**permalink**) 09-29-2004, 07:45 PM

Code is above. Does this picture help?

seonewbee · #6 (**permalink**) 09-30-2004, 08:00 PM

Have I stumped all the experts here!

Jazzee · #7 (**permalink**) 09-30-2004, 08:33 PM

Upload the page, then post a link.

imaginemn · #8 (**permalink**) 09-30-2004, 08:47 PM

1. I agree. It would make more sense to see all the supporting pages and the best way to do this is to view the page online.

2. You are not closing all your DIV tags. It was also difficult to read your code because your example code has &quote; and not ".

Example:
==================================
You have
==================================

<div class="center">content here content here contebnt here
<div class="left">content left here
<div class="right">content right here

==================================
It should be
==================================

<div class="center">content here content here contebnt here</DIV>
<div class="left">content left here</DIV>
<div class="right">content right here</DIV>

==================================

imaginemn

seonewbee · #9 (**permalink**) 09-30-2004, 09:24 PM

1) I shall upload later and give a link.

2) Looks like my divs are open, but I checked the code and they are paired. They just got dropped somehow when uploaded. Should have put in a tar and attached

Thanks for your time imaginemn and Jazzee. Catch you later.

Try this URL:

http://www.forumsww.com/new/TEMPLATE2.html

LazyJim · #10 (**permalink**) 10-01-2004, 06:09 AM

Why not post a drawing of what you WANT to happen?

seonewbee · #11 (**permalink**) 10-01-2004, 12:37 PM

LazyJim,

See the picture above, Want "content left here" amd "content right here" on the same line but seperate col's. Think of a table with col's vertically aligned.

LazyJim · #12 (**permalink**) 10-01-2004, 02:01 PM

ah yeah a pic... i see it now!

should the rows alternate from single col, 2 col, single col, 2 col...ect or just be 2col all the way?

seonewbee · #13 (**permalink**) 10-01-2004, 02:59 PM

Quote:

Originally Posted by LazyJim

ah yeah a pic... i see it now!

should the rows alternate from single col, 2 col, single col, 2 col...ect or just be 2col all the way?

Single col is for titles (h1...h6), banners, and aligning 2col's. Main content is in 2 col's format. If used a bigger page size could be 3 or more col's across. But for now 2 col's.

LazyJim · #14 (**permalink**) 10-02-2004, 01:51 AM

can you just set the 2 cols as a <div> each, both with float:left; ?
might need a fixed with <div> around them, and the cell <div>s might need a width like 49% or something.

seonewbee · #15 (**permalink**) 10-04-2004, 02:30 PM

Thanks everybody for all your help. I have given up, and will place a table in the left col of the design. Maybe, I can figure it out later.