CSS Column layout problem

The_Vulcan · March 20, 2006, 3:15am

[SIZE=3][COLOR=RoyalBlue]New to CSS having trouble getting things to flow how I want them to.[/COLOR][/SIZE]

body{
background-color: #00CC33;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size:100%;
}

#wrapper{
width: 1000px;
height: auto;
background-color: #FFFFFF;
margin: auto;
text-align: left;
border: thin dotted #000000;

}

#ad {
display: block;
background-color: #5FED58; /* Color behind */
width:163px;
height:50px;
border: thin dotted #000000;
float: relative;
padding-top: 10px;
}

#topbanner {
display: block;
background-color: #5FED58; /* Color behind */
width: auto px;
height:100px;

border: thin dotted #000000;
float: relative;
}

#mainmenu {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #5FED58;
width: auto px;
height:20px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
border: thin dotted #000000;
float: relative;
color: #666666;
word-spacing: 8em;

}

#lastupdated {
float: none;
border: thin dotted #000000;
background-color: #FFFFFF;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: right;
font-size: 60%;
width: auto;
height:15px;
color: #666666;

}

#adarea{
width: 793px;
height: 500px;
background-color: #555555;
margin-right: 50x;
margin-left: 200px;
margin-top: 0px;
margin-bottom: 20px;
text-align: left;
border: thin dotted #000000;
float: none;
position: static;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

/* ******************************************************************************************************************************** /
/ ******************************************************************************************************************************** /
/ ******************************************************************************************************************************** */

/************************************** VERT-MENU *************************************/
#left_menu_home {
font-family: Verdana, Arial, Helvetica, sans-serif; / sets fonts for entire menu */
background-color: #FFFFFF;
font-size: 100%;
width: 163px;
border: thin dotted #000000;

padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;

margin: 0px;
margin-right: 0px;
margin-left: 8px;
margin-top: 0px;
margin-bottom: 0px;
float: relative;

}
/************************************** MENU HEADERS /
#left_menu_home h1 {
display: block;
background-color: #5FED58; / Color behind menu headers /
font-size: 70%;
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
/ MENU HEADERS PADDING /
#left_menu_home under_line {
list-style: none;
margin: 0px;
padding: 0px; / padding around MENU HEADERS /
border: none; / border around hole menu /
}
/ MENU ITEMS PADDING /
#left_menu_home under_line list_items {
margin: 0px;
padding: 0px;
}
/ MENU ITEMS /
#left_menu_home under_line list_items a {
font-size: 60%;
display: block;
background-color: #E9FCE8;
border-bottom: 1px dashed #C39C4E; / dotted lines /
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
text-decoration: none;
color: #666666; / menu text color /
width:160px; / width of menu items /
}
/ HOVER EFFECT *************************************/
#left_menu_home under_line list_items a:hover, #left_menu_home under_line list_items a:focus {
color: #000000;
background-color: #FFFFFF; / mouse over bg color */
}

</STYLE>
</HEAD>
<BODY>

<div id=“mainmenu”>Home Contact Members Client About</div>

<div id=“lastupdated”>Site last updated 13th April 2006 at 11:59pm</div>

<H1>SEARCH</H1>

<under_line>

<list_items>
<TD width=“100” ><A tabindex=“2”> <B>Select Catagory</B>
</A></TD>

<TD width=“100”><A tabindex=“2”>
<SELECT name=url>
<OPTION value=“index=blended” selected> Catagories
<OPTION value=“index=stripbooks:relevance-above”> Books
<OPTION value=“index=music”> Popular Music
<OPTION value=“index=music-dd”> Music Downloads
<OPTION value=“index=classical”> Classical Music
<OPTION value=“index=dvd”> DVD
<OPTION value=“index=vhs”> VHS
<OPTION value=“index=apparel-index&platform=gurupa”> Apparel
<OPTION value=“index=local-index&platform=gurupa”> Yellow Pages
<OPTION value=“index=theatrical”> Movie Showtimes
</SELECT>
</A></TD>
</list_items>

<list_items>
<TD width=“100” ><A tabindex=“2”> <B>Select Catagory</B>
</A></TD>

<TD width=“100”><A tabindex=“2”>
<SELECT name=url>
<OPTION value=“index=blended” selected> Catagories
<OPTION value=“index=stripbooks:relevance-above”> Books
<OPTION value=“index=music”> Popular Music
<OPTION value=“index=music-dd”> Music Downloads
<OPTION value=“index=classical”> Classical Music
<OPTION value=“index=dvd”> DVD
<OPTION value=“index=vhs”> VHS
<OPTION value=“index=apparel-index&platform=gurupa”> Apparel
<OPTION value=“index=local-index&platform=gurupa”> Yellow Pages
<OPTION value=“index=theatrical”> Movie Showtimes
</SELECT>
</A></TD>
</list_items>

<list_items>
<A href="#" tabindex=“4”>
<INPUT name=“search” type=“button” value=" Search " />
</A>
</list_items>

<list_items>
<A href="#" tabindex=“4”>Advanced Search
</A>
</list_items>

<H1>NEW LISTINGS</H1>

<under_line>
<list_items><A href="#" tabindex=“1”>Today (20) </A></list_items>
<list_items><A href="#" tabindex=“2”>Last 3 days (100) </A></list_items>
<list_items><A href="#" tabindex=“3”>Last week (2000) </A></list_items>
</under_line>

<H1>TOP 10 SEARCHES</H1>

<under_line>
<list_items><A href="#" tabindex=“1”>1. Item </A></list_items>
<list_items><A href="#" tabindex=“2”>2. Item </A></list_items>
<list_items><A href="#" tabindex=“3”>3. Item </A></list_items>
<list_items><A href="#" tabindex=“4”>4. Item </A></list_items>
<list_items><A href="#" tabindex=“5”>5. Item </A></list_items>
<list_items><A href="#" tabindex=“6”>6. Items </A></list_items>
<list_items><A href="#" tabindex=“7”>7. Item </A></list_items>
<list_items><A href="#" tabindex=“8”>8. Item </A></list_items>
<list_items><A href="#" tabindex=“9”>9. Item </A></list_items>
<list_items><A href="#" tabindex=“10”>10. Item </A></list_items>
</under_line>

<H1>FEATURED ITEMS</H1>

<under_line>
<list_items><A href="#" tabindex=“1”>Show all (50) </A></list_items>
<list_items><A href="#" tabindex=“1”>Reviewed items (175) </A></list_items>
</under_line>

<H1>TOP 10 STORES</H1> 
<under_line>
<list_items><A href="#" tabindex=“1”>1. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>2. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>3. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>4. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>5. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>6. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>7. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>8. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>9. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>10. Item </A></list_items>
<list_items><A href="#" tabindex=“1”>* View all stores * </A></list_items>
</under_line>

</under_line>

<br>
<div id=“ad”>Ad space
</div>

</div>

**[COLOR=Red] <div id=“adarea”>
This Should be up where the Menu starts. <br>
This section will also have to be divided into half.<br>
It will be used to display products pulled from mySQL 2 side by side.
</div>[/COLOR]
**

</div>

</BODY>
</HTML>

[SIZE=3]** Any help appreciated.**[/SIZE]

Ankou · March 21, 2006, 10:08pm

You’re going to have to recode a few things… actually probably a lot. You say you’re new to CSS so you might want to start off making sure you’re familiar with your CSS and working up to learning CSS positioning using floats.

The reason I say that is that looking at your code you’re using id=“ad” in a number of places for this one file. Those IDs should be classes. IDs should only be used once whereas class can be used multiple times.

You also want to look into using the right DOCTYPE for your code. That’ll be a big help when you validate the HTML code.

The reason your not seeing the one section up where you want it is because you need to work with floats in order to do what you’re looking to do (or absolute positioning, but I advise against that). Now when you start with CSS positioning using floats you’re really going to need to watch the widths/paddings/margins of your elements. This is because of the box-model issues with IE. Try to avoid those issues buy checking your layout as you go in Firefox. Then when it looks right, check it in IE – IE 6, 5.5 and 5. You can grab standalone version of IE 5.5 and 5 at evolt.org’s browser archive (http://browsers.evolt.org/?ie/32bit/standalone). Very helpful to have in order to make sure that the site you’re creating looks the way you intend it to look on those browsers.

Read up a bit on CSS at the W3School website - that should give you the basics that you seemed to overlook in a few places in the code you posted above (those ID vs. Class issues I mentioned). W3School CSS - http://www.w3schools.com/css/default.asp

Then start looking into positioning with CSS, mainly floats -
http://css.maxdesign.com.au/floatutorial/
http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm
And of course do a search at google for CSS positioning using floats for more links.

And here’s a good page with some links to layouts - http://www.positioniseverything.net/index.php - looks for the “Layout Demos” section as you scroll down. You should find a few good layouts with example code that you can look at to get better ideas on how to use CSS positioning.

The_Vulcan · March 21, 2006, 11:28pm

Thanks for the big reply Ankou

You’re going to have to recode a few things… actually probably a lot.

I have not doubt about that, I have been trying to modify samples to achieve what I want as there were no samples doing it for me.

Those IDs should be classes. IDs should only be used once whereas class can be used multiple times.

I will make a mental note of that. Haven’t read up on that yet.

You also want to look into using the right DOCTYPE for your code. That’ll be a big help when you validate the HTML code.

Just strip out that to post the bare minimum.

The reason your not seeing the one section up where you want it is because you need to work with floats in order to do what you’re looking to do (or absolute positioning, but I advise against that).

Seeing as I want it centered and I don’t know what res the user is using I didn’t think absolute positioning would work. Or that all the %'s would be a nightmare.
Also as the content will be dynamic, while I know how to put a <table> in a PHP loop. I am not sure how that would work with absolute positioning.

This is because of the box-model issues with IE.

One of the reasons I was wondering if I should bother with CSS at all for layout.
After doing a lot of reading on the net, and seeing all the hacks to get cross browser support and how difficult it is to make columns as opposed to a simple table.

Read up a bit on CSS at the W3School website

Already got that place bookmarked…. =)

Then start looking into positioning with CSS, mainly floats -
http://css.maxdesign.com.au/floatutorial/
http://www.bigbaer.com/css_tutorials…l.tutorial.htm

Already had maxdesign bookmarked as well. I have about 20 sites bookmarked on the topic. But now I just added a few more from links you gave me.

Prior to your post I got the content area up inline with the menu. I also have boxes to display content in there. Now I just need to get each of these boxes layed out to display the content. Like the image below.

Prototype layout.

I was thinking that I should try and do it 100% CSS, but now I am wondering if I am going too far. Perhaps I should be using some tables ???

Current code:

[COLOR=Red]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“XHTML namespace” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
<title></title>
<style type=“text/css” media=“screen”>
/* <![CDATA[ */

#wrapper{
width: 1000px;
height: auto;
background-color: #FFFFFF;
margin: auto;
text-align: left;
border: thin dotted #000000;
}

#ad {
display: block;
background-color: #5FED58; /* Color behind */
width:163px;
height:50px;
border: thin dotted #000000;
float: relative;
padding-top: 10px;
}

body {
margin:0;
padding:0;
background: #fff;
}
#Header {
margin:0;
padding:0;
height: 120px;
background: #eee;
border-bottom: 1px solid #000;
}
#Footer {
background: #eee;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#Main {
margin: 0;
padding: 0;
}

#Main #Left {
float: left;
width: 160px;
margin-left: 10px;
padding: 10px 5px;
background: #ccc;
}

#Main #Right {
float: right;
width: 790px;
margin-right: 10px;
margin: auto;
padding: 10px 5px;
background: #ccc;
}

#Main #Left2 { /* ############################################################################# */
float: left;
width: 360px;
margin-bottom: 10px;
height: 360px;
background: #E9FCE8;
border: thin dotted #000000;
}

#Main #Right2 {
float: right;
width: 360px;
margin-bottom: 10px;
height: 360px;
background: #E9FCE8;
border: thin dotted #000000;

}

#Main #Middle {
margin: 0 10 0 10;
padding: 10px 5px;
border: 0px;
}

.padder {
margin: 0;
padding: 0.5em 1em;
border: 0;
}

.spacer {
clear: both;
height: 0px;
font-size: 0px;
border: 0;
margin:0;
padding:0;
visibility: hidden;
}

/************************************** VERT-MENU **************************************/
#left_menu_home {
float: left;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
font-size: 100%;
width: 163px;
border: thin dotted #000000;
position: relative;

}
/************************************** MENU HEADERS /
#left_menu_home h1 {
display: block;
background-color: #5FED58; / Color behind menu headers /
font-size: 70%;
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
/ MENU HEADERS PADDING /
#left_menu_home under_line {
list-style: none;
margin: 0px;
padding: 0px; / padding around MENU HEADERS /
border: none; / border around hole menu /
}
/ MENU ITEMS PADDING /
#left_menu_home under_line list_items {
margin: 0px;
padding: 0px;
}
/ MENU ITEMS /
#left_menu_home under_line list_items a {
font-size: 60%;
display: block;
background-color: #E9FCE8;
border-bottom: 1px dashed #C39C4E; / dotted lines /
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
text-decoration: none;
color: #666666; / menu text color /
width:160px; / width of menu items /
}
/ HOVER EFFECT *************************************/
#left_menu_home under_line list_items a:hover, #left_menu_home under_line list_items a:focus {
color: #000000;
background-color: #FFFFFF; / mouse over bg color */
}

/* ]]> */
</style>
</head>
<body>

<!-- ############################################################################# –>
<div id=“Header”>

<div class=“padder”>
<h1>#Header</h1>
</div>
</div>
<!-- ############################################################################# –>

&lt;div id="left_menu_home"&gt; 
 &lt;H1&gt;SEARCH&lt;/H1&gt;                &lt;!-- #############################################################################  --&gt;

<under_line>

<list_items>
<TD width=“100” ><A tabindex=“2”> <B>Select Catagory</B>
</A></TD>

<TD width=“100”><A tabindex=“2”>
<SELECT name=url>
<OPTION value=“index=blended” selected> Catagories
<OPTION value=“index=stripbooks:relevance-above”> Books
<OPTION value=“index=music”> Popular Music
<OPTION value=“index=music-dd”> Music Downloads
<OPTION value=“index=classical”> Classical Music
<OPTION value=“index=dvd”> DVD
<OPTION value=“index=vhs”> VHS
<OPTION value=“index=apparel-index&platform=gurupa”> Apparel
<OPTION value=“index=local-index&platform=gurupa”> Yellow Pages
<OPTION value=“index=theatrical”> Movie Showtimes
</SELECT>
</A></TD>
</list_items>

<list_items>
<TD width=“100” ><A tabindex=“2”> <B>Select Catagory</B>
</A></TD>

<TD width=“100”><A tabindex=“2”>
<SELECT name=url>
<OPTION value=“index=blended” selected> Catagories
<OPTION value=“index=stripbooks:relevance-above”> Books
<OPTION value=“index=music”> Popular Music
<OPTION value=“index=music-dd”> Music Downloads
<OPTION value=“index=classical”> Classical Music
<OPTION value=“index=dvd”> DVD
<OPTION value=“index=vhs”> VHS
<OPTION value=“index=apparel-index&platform=gurupa”> Apparel
<OPTION value=“index=local-index&platform=gurupa”> Yellow Pages
<OPTION value=“index=theatrical”> Movie Showtimes
</SELECT>
</A></TD>
</list_items>

<list_items>
<A href=“#” tabindex=“4”>
<INPUT name=“search” type=“button” value=" Search " />
</A>
</list_items>

<list_items>
<A href=“#” tabindex=“4”>Advanced Search
</A>
</list_items>

<H1>NEW LISTINGS</H1> <!-- ############################################################################# –>

<under_line>
<list_items><A href=“#” tabindex=“1”>Today (20) </A></list_items>
<list_items><A href=“#” tabindex=“2”>Last 3 days (100) </A></list_items>
<list_items><A href=“#” tabindex=“3”>Last week (2000) </A></list_items>
</under_line>

<H1>TOP 10 SEARCHES</H1> <!-- ############################################################################# –>

<under_line>
<list_items><A href=“#” tabindex=“1”>1. Item </A></list_items>
<list_items><A href=“#” tabindex=“2”>2. Item </A></list_items>
<list_items><A href=“#” tabindex=“3”>3. Item </A></list_items>
<list_items><A href=“#” tabindex=“4”>4. Item </A></list_items>
<list_items><A href=“#” tabindex=“5”>5. Item </A></list_items>
<list_items><A href=“#” tabindex=“6”>6. Items </A></list_items>
<list_items><A href=“#” tabindex=“7”>7. Item </A></list_items>
<list_items><A href=“#” tabindex=“8”>8. Item </A></list_items>
<list_items><A href=“#” tabindex=“9”>9. Item </A></list_items>
<list_items><A href=“#” tabindex=“10”>10. Item </A></list_items>
</under_line>

<H1>FEATURED ITEMS</H1> <!-- ############################################################################# –>

<under_line>
<list_items><A href=“#” tabindex=“1”>Show all (50) </A></list_items>
<list_items><A href=“#” tabindex=“1”>Reviewed items (175) </A></list_items>
</under_line>

<H1>TOP 10 STORES</H1> <!-- ############################################################################# –>
<under_line>
<list_items><A href=“#” tabindex=“1”>1. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>2. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>3. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>4. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>5. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>6. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>7. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>8. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>9. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>10. Item </A></list_items>
<list_items><A href=“#” tabindex=“1”>* View all stores * </A></list_items>
</under_line>

</under_line>

<BR>
<DIV id=“ad”>Ad space
</DIV>

</DIV>

&lt;div id="Left2"&gt;LLLLLLLLLLLLLLLLLLLLLLL
    &lt;/div&gt;
 &lt;div id="Right2"&gt;RRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
&lt;/div&gt;
 
&lt;div id="Left2"&gt;LLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLL
    &lt;/div&gt;
 &lt;div id="Right2"&gt;RRRRRRRRRRRRRRRRRRR
&lt;/div&gt;

&lt;div id="Left2"&gt;LLLLLLLLLLLLLLLLLLLLLLL
    &lt;/div&gt;
 &lt;div id="Right2"&gt;RRRRRRRRRRRRRRRRRRR
&lt;/div&gt;

&lt;div id="Left2"&gt;LLLLLLLLLLLLLLLLLLLLLLL
    &lt;/div&gt;
 &lt;div id="Right2"&gt;RRRRRRRRRRRRRRRRRRR
&lt;/div&gt;


 
&lt;/div&gt;

</div>

&lt;h1&gt;#Footer&lt;/h1&gt;

&lt;/div&gt;

</div>

</body></html>
[/COLOR]

Ankou · March 21, 2006, 11:55pm

If you want to go full CSS or not is up to you, but it’s a good idea. Leave tables for what they were intended for and skip using them for the layout of a website.

CSS positioning can be a bit tricky when you’re new to it, but trust me when I say that it’s really worth putting in the effort to learn and understand it. The box-model can be an issue if you make it an issue, there are ways to avoid it. For example… if you have a two column layout that you want to be a total of 700px wide. Make one column say 200px wide and the other 500px wide. Don’t use borders around either, set margins/padding to 0. Float both to the left. Then work with styling your inner tags to have borders, margins, paddings, etc. That way the layout won’t get messed up by the box-model issues of the two floating divs containing your content.

I won’t get into it but you can use position absolute inside a relatively positioned element to get the desired effect you’re after. So CSS top: 0 and right: 0 of the absolutely positioned element wouldn’t put it in the top right corner of the browser, but rather the parent element (as long as it had position: relative set in its CSS).

Here’s a sample of what I’m talking about:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>Test</title>
  <style type="text/css" media="all">
  #rel{ position: relative; height: 600px; width: 760px; background: #cde; }
  #abs{ position: absolute; bottom: 0; right: 0; background: #edc; }
  </style>
 </head>
 <body>
  <br /><br /><br />Test<br /><br /><br />
  <div id="rel">
   <div id="abs">Bottom Right</div>
  </div>
 </body>
</html>

But that’s beyond necessary for what you need.

As for getting the layout the way you need it (from your image), well there are a number of different ways you could go about it. You have to play around a bit and find out what works best for your situation.

Just looking at the image I’d start off with floating two divs next to each other with the same width. Each will hold the google information. Then since both of those are the same you’ll be using classes to display the info.

1 div floated left for the image
1 div floated left for the Google logo, price info, and end date
Clear those floats (with an element set to clear:both in the CSS)
Category/Product/Brand Titles – list items or floating elements
Category/Product/Brand Values – list items or floating elements
Description – just a paragrpah tag would work
Rating - list items or floating elements
Info under that - I think it’s an ad # (sorry hard to read for me) – floating elements, list items, or even a paragraph with images floating to the right.

But like I said there would be a number of ways to do this and I’m not saying what I put above would be the best. I’m only looking at an image and I have no idea how the information is being obtained or how much that information would change. For example if one description is shorter than the other, would you need the boxes to still be the same size? Sometimes how the information changes will change how you go about creating the CSS/HTML code that you need to work with.

The_Vulcan · March 22, 2006, 12:14am

Hey thanks Ankou

That information has been a huge help and given me some ideas on direction and what to read up on.

And yeah content will be PHP mySQL, i’ll be limiting the amount of text they can input in each field into the data base but I will still need seperate boxes for each item that is displayed.

Thanks again.

Ankou · March 22, 2006, 12:59am

No problem, hope it cleared things up a little for ya. Good luck with the site.

The_Vulcan · March 22, 2006, 5:50am

[COLOR=“Blue”]Hey thanks…

I have just had a rough go at getting it layed out like the image…

I know the code needs cleaning, and I haven’t browser tested it…
But if it works then I see no reason why I can’t do the entire site without a single <table>. And if it wasn’t for your showing clear:both I would have been stuck without knowing why… :pleased:
[/COLOR]

SAMPLE LAYOUT
##################################################
##################################################
##################################################

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
<title></title>
<style type=“text/css” media=“screen”>
/* <![CDATA[ */

#wrapper{
width: 1000px;
height: auto;
background-color: #FFFFFF;
margin: auto;
text-align: left;
border: thin dotted #000000;
}

#ad {
display: block;
background-color: #5FED58; /* Color behind */
width:163px;
height:50px;
border: thin dotted #000000;
float: relative;
padding-top: 10px;
}

body {
margin:0;
padding:0;
background: #fff;
}
#Header {
margin:0;
padding:0;
height: 120px;
background: #eee;
border-bottom: 1px solid #000;
}
#Footer {
background: #eee;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#Main {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

#Main #Left {
float: left;
width: 160px;
margin-left: 5px;
padding: 10px 5px;
background: #ccc;
}

#Main #Right {
float: right;
width: 790px;
margin-right: 5px;
margin: auto;
padding: 10px 5px;
background: #ccc;
}

#Main #Middle {
margin: 0 10 0 10;
padding: 10px 5px;
border: 0px;
}

.padder {
margin: 0;
padding: 0.5em 1em;
border: 0;
}

.spacer {
clear: both;
height: 0px;
font-size: 0px;
border: 0;
margin:0;
padding:0;
visibility: hidden;
}

/************************************** VERT-MENU **************************************/
#left_menu_home {
float: left;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
font-size: 100%;
width: 163px;
border: thin dotted #000000;
position: relative;

}
/************************************** MENU HEADERS /
#left_menu_home h1 {
display: block;
background-color: #5FED58; / Color behind menu headers /
font-size: 70%;
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
/ MENU HEADERS PADDING /
#left_menu_home under_line {
list-style: none;
margin: 0px;
padding: 0px; / padding around MENU HEADERS /
border: none; / border around hole menu /
}
/ MENU ITEMS PADDING /
#left_menu_home under_line list_items {
margin: 0px;
padding: 0px;
}
/ MENU ITEMS /
#left_menu_home under_line list_items a {
font-size: 60%;
display: block;
background-color: #E9FCE8;
border-bottom: 1px dashed #C39C4E; / dotted lines /
padding: 3px 0 3px 3px; / ( top padding | right padding | bottom padding | left padding) /
text-decoration: none;
color: #666666; / menu text color /
width:160px; / width of menu items /
}
/ HOVER EFFECT *************************************/
#left_menu_home under_line list_items a:hover, #left_menu_home under_line list_items a:focus {
color: #000000;
background-color: #FFFFFF; / mouse over bg color */
}

/* ########################################################################################################################## /
/ ########################################################################################################################## /
/ ########################################################################################################################## */
**[COLOR=“Red”]#Main #left3 {
float: left;
width: 375px;
margin-bottom: 10px;
height: 390px;
/*background: #E9FCE8; */
background-image: url(‘google.jpg’);
border: thin dotted #000000;
}

#Main #right3 {
float: right;
width: 375px;
margin-bottom: 10px;
height: 390px;
background: #DEFED3;

border: thin dotted #000000;
}

#Main #TV {
float: left;
width: 220px;
margin-left: 5px;
margin-top: 5px;
height: 175px;
/* background: #898989; */
border: thin dotted #000000;
}

#Main #logo_image {
font-size: 120%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 0px;
height: 50px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #client {
font-size: 70%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #was {
font-size: 70%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #percentage_off {
font-size: 70%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #savings {
font-size: 70%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #sale_price {
font-size: 130%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 25px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #end_date {
font-size: 70%;
float: left;
width: 130px;
margin-left: 226px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #catagory {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #product {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #brand {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #catagory_item {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 0px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #product_item {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 0px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #brand_item {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 0px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#clear_both
{
clear: both
}

#seperation_line{
margin-left: 5px;
display: block;
border-bottom: 1px solid #00CC33;
width: 365px;
height: 5px;
}

#Main #discriptions {
font-size: 70%;
text-align: left;
float: left;
width: 365px;
margin-left: 5px;
margin-top: 2px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #discription {
font-size: 70%;
text-align: left;
float: left;
width: 365px;
margin-left: 5px;
margin-top: 0px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #rating_text {
font-size: 70%;
text-align: left;
float: left;
width: 115px;
margin-left: 5px;
margin-top: 0px;
height: 15px;
/* background: #FFFFFF; */
border: thin dotted #000000;
}

#Main #ad_id {
font-size: 70%;
text-align: left;
float: left;
width: 200px;
margin-left: 5px;
margin-top: 7px;
height: 15px;
/* background: #FFFFFF; /
border: thin dotted #000000;
}
#Main #tabs {
font-size: 70%;
text-align: center;
float: left;
width: 75px;
margin-left: 5px;
margin-top: 7px;
height: 15px;
/ background: #FFFFFF; /
border: thin dotted #000000;
}**[/COLOR]
/ ########################################################################################################################## /
/ ########################################################################################################################## /
/ ########################################################################################################################## */

/* ]]> */
</style>
</head>
<body>

<div id=“Header”>

<div class=“padder”>
<h1>#Header</h1>
</div>
</div>

&lt;div id="left_menu_home"&gt; 
  &lt;H1&gt;SEARCH&lt;/H1&gt;
  &lt;!-- #############################################################################  --&gt;
  &lt;under_line&gt; &lt;list_items&gt; 
  &lt;TD width="100" &gt;&lt;A tabindex="2"&gt; &lt;B&gt;Select Catagory&lt;/B&gt; &lt;/A&gt;&lt;/TD&gt;
  &lt;TD width="100"&gt;&lt;A tabindex="2"&gt; 
    &lt;SELECT name=url&gt;

      &lt;OPTION value="index=blended" selected&gt; Catagories 
      &lt;OPTION value="index=stripbooks:relevance-above"&gt; Books 
      &lt;OPTION value="index=music"&gt; Popular Music 
      &lt;OPTION value="index=music-dd"&gt; Music Downloads 
      &lt;OPTION value="index=classical"&gt; Classical Music 
      &lt;OPTION value="index=dvd"&gt; DVD 
      &lt;OPTION value="index=vhs"&gt; VHS 
      &lt;OPTION value="index=apparel-index&platform=gurupa"&gt; Apparel 
      &lt;OPTION value="index=local-index&platform=gurupa"&gt; Yellow Pages 
      &lt;OPTION value="index=theatrical"&gt; Movie Showtimes 
    &lt;/SELECT&gt;

    &lt;/A&gt;&lt;/TD&gt;
  &lt;/list_items&gt; &lt;list_items&gt; 
  &lt;TD width="100" &gt;&lt;A tabindex="2"&gt; &lt;B&gt;Select Catagory&lt;/B&gt; &lt;/A&gt;&lt;/TD&gt;
  &lt;TD width="100"&gt;&lt;A tabindex="2"&gt; 
    &lt;SELECT name=url&gt;
      &lt;OPTION value="index=blended" selected&gt; Catagories 
      &lt;OPTION value="index=stripbooks:relevance-above"&gt; Books 
      &lt;OPTION value="index=music"&gt; Popular Music 
      &lt;OPTION value="index=music-dd"&gt; Music Downloads 
      &lt;OPTION value="index=classical"&gt; Classical Music 
      &lt;OPTION value="index=dvd"&gt; DVD 
      &lt;OPTION value="index=vhs"&gt; VHS 
      &lt;OPTION value="index=apparel-index&platform=gurupa"&gt; Apparel 
      &lt;OPTION value="index=local-index&platform=gurupa"&gt; Yellow Pages 
      &lt;OPTION value="index=theatrical"&gt; Movie Showtimes 
    &lt;/SELECT&gt;

    &lt;/A&gt;&lt;/TD&gt;
  &lt;/list_items&gt; &lt;list_items&gt; &lt;A href="#" tabindex="4"&gt; 
  &lt;INPUT name="search" type="button" value=" Search " /&gt;
  &lt;/A&gt; &lt;/list_items&gt; &lt;list_items&gt; &lt;A href="#" tabindex="4"&gt;Advanced Search 
  &lt;/A&gt; &lt;/list_items&gt; 
  &lt;H1&gt;NEW LISTINGS&lt;/H1&gt;
  &lt;!-- #############################################################################  --&gt;

  &lt;under_line&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;Today (20) &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="2"&gt;Last 3 days (100) &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="3"&gt;Last week (2000) &lt;/A&gt;&lt;/list_items&gt; 
  &lt;/under_line&gt; 
  &lt;H1&gt;TOP 10 SEARCHES&lt;/H1&gt;
  &lt;!-- #############################################################################  --&gt;
  &lt;under_line&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;1. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="2"&gt;2. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="3"&gt;3. 
  Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="4"&gt;4. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="5"&gt;5. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="6"&gt;6. 
  Items &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="7"&gt;7. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="8"&gt;8. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="9"&gt;9. 
  Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="10"&gt;10. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;/under_line&gt; 
  &lt;H1&gt;FEATURED ITEMS&lt;/H1&gt;

  &lt;!-- #############################################################################  --&gt;
  &lt;under_line&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;Show all (50) &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;Reviewed items (175) &lt;/A&gt;&lt;/list_items&gt; 
  &lt;/under_line&gt; 
  &lt;H1&gt;TOP 10 STORES&lt;/H1&gt;
  &lt;!-- #############################################################################  --&gt;
  &lt;under_line&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;1. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;2. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;3. 
  Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;4. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;5. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;6. 
  Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;7. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;8. Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;9. 
  Item &lt;/A&gt;&lt;/list_items&gt; &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;10. Item &lt;/A&gt;&lt;/list_items&gt; 
  &lt;list_items&gt;&lt;A href="#" tabindex="1"&gt;* View all stores * &lt;/A&gt;&lt;/list_items&gt; 
  &lt;/under_line&gt; &lt;/under_line&gt; &lt;BR&gt;

  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;
  &lt;BR&gt;
  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;
  &lt;BR&gt;
  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;
  &lt;BR&gt;
  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;

  &lt;BR&gt;
  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;
  &lt;BR&gt;
  &lt;DIV id="ad"&gt;Ad space &lt;/DIV&gt;
&lt;/DIV&gt;

</div>

**[COLOR=“Red”]<div id=“right3”>

&lt;div id="TV"&gt; 
	&lt;div id="logo_image"&gt;		GOOGLE.jpg		&lt;/div&gt;

	&lt;div id="client"&gt;			Google			&lt;/div&gt;
	&lt;div id="was"&gt;				Was: $12,000	&lt;/div&gt;
	&lt;div id="percentage_off"&gt;	20% off			&lt;/div&gt;
	&lt;div id="savings"&gt;			Saving: $10,000	&lt;/div&gt;
	&lt;div id="sale_price"&gt;		$12,000			&lt;/div&gt;

	&lt;div id="end_date"&gt;			13th Apr 06		&lt;/div&gt;
&lt;/div&gt;

&lt;div id="catagory"&gt;				Catagory		&lt;/div&gt;	
&lt;div id="product"&gt;				Product			&lt;/div&gt;
&lt;div id="brand"&gt;				Brand			&lt;/div&gt;

&lt;div id="catagory_item"&gt;				Electronics		&lt;/div&gt;	
&lt;div id="product_item"&gt;				TV				&lt;/div&gt;
&lt;div id="brand_item"&gt;				Sony			&lt;/div&gt;

&lt;div id="discriptions"&gt;			Discription		&lt;/div&gt;

&lt;div id="discription"&gt;			# faehwfiuhe ;iewo fihfeih fehf efaew afewvtaeteartvret	&lt;/div&gt;
&lt;div id="discription"&gt;			# faehwfiuhe ;iewo fihfeih fehf efaew afewvtaeteartvret	&lt;/div&gt;
&lt;div id="discription"&gt;			# faehwfiuhe ;iewo fihfeih fehf efaew afewvtaeteartvret	&lt;/div&gt;
&lt;div id="discription"&gt;			# faehwfiuhe ;iewo fihfeih fehf efaew afewvtaeteartvret	&lt;/div&gt;

&lt;div id="discription"&gt;			# faehwfiuhe ;iewo fihfeih fehf efaew afewvtaeteartvret	&lt;/div&gt;

&lt;div id="rating_text"&gt;			Your rating: 3.0	&lt;/div&gt;	
&lt;div id="rating_text"&gt;			Votes: 76			&lt;/div&gt;
&lt;div id="rating_text"&gt;			Rating: 3.5			&lt;/div&gt;

&lt;div id="ad_id"&gt;				Ad # 08-00001-08-0306-22-0001	&lt;/div&gt;	
&lt;div id="tabs"&gt;					Wish List						&lt;/div&gt;
&lt;div id="tabs"&gt;					More Details					&lt;/div&gt;

</div>[/COLOR]**

</div>

</div>

</div>

</div>
</div>
</div>

&lt;h1&gt;#Footer&lt;/h1&gt;

&lt;/div&gt;

</div>

</body></html>

##################################################
##################################################
##################################################

Ankou · March 22, 2006, 6:10am

Yeah if you don’t clear those floating elements, trouble can happen.

Don’t forget about the ID vs. class problem I mentioned to you before. If you’re going to use a CSS ruleset more than once use a class. If you’re going to only use the ruleset once per document, then use an ID.

BTW - you’re working with XHTML strict as your DOCTYPE. That’s a pretty big step to make for someone who’s a bit new to CSS. You may want to go with XHTML transitional for the time being and work your way up to that. Mind you that’s just a suggestion, the choice is up to you. However with a strict DOCTYPE you may run into more problems than you would if you were using transitional.

The_Vulcan · March 22, 2006, 6:31am

Don’t forget about the ID vs. class problem I mentioned to you before. If you’re going to use a CSS ruleset more than once use a class. If you’re going to only use the ruleset once per document, then use an ID.

I am going to have to read up on that… I have the 20+ CSS sites bookmarked that I have skimmed through, and “Teach yourself CSS in 24h” book beside me that I am yet to properly start. But as yet I couldn’t tell you the difference between an id and class.

BTW - you’re working with XHTML strict as your DOCTYPE. That’s a pretty big step to make for someone who’s a bit new to CSS.

Yeah thats a good point and I did read about that on one of the CSS sites…

At the moment since I am experimenting I’m not worried about it I just hit new doc in Dreamweaver and happen to have XHTML box ticked…
However this site is going to be my own commercial adventure. I expect it to take me 6-8+ months to build, if I ever finish it.
By that time I will have mastered CSS… The site will work or die… If it does work huge traffic and no room for errors… So I will have to aim high… :thumb:

Topic	Replies	Views
3 column layout help web dev	64	June 22, 2007
Header & Navigation Problems web dev	87	July 11, 2007
Layout help	81	February 4, 2010
CSS Template question web dev	78	July 29, 2006
CSS Woes	42	July 10, 2007

CSS Column layout problem

Follow:

Popular

Loose Ends

CSS Column layout problem

Related topics

Follow:

Popular

Loose Ends