Trying to make a three column "table" with CSS.

[mr_director]

Hey guys, I hope this is an easy fix. I'm trying to simulate a search results page with three small columns -- one for the picture, one for the title of the video and description, then one for the details of the video. Easy cake with tables, but I can't really figure it out with CSS. Here's a pic:Here's what I settled for -- the "third column" of video info. just being underneath:I did the video info as a list. Perhaps not the best?HTML for my page:

<div class="videocontainer"><div class="videothumbnail"><a href="http://www.collegeisamovie.com/?page_id=527"><img src="/movies/images/thumb_whitehouses.jpg" alt="" /></a></div><div class="videotitle"><a href="http://www.collegeisamovie.com/?page_id=527">"White Houses," Jesse Chapman (Live)</a></div><div class="videodescription">Jesse Chapman brings Vanessa Carlton's hit single "White Houses" to life in this amazing one-night-only live performance.</div><div id="videoinfocontainer"><ul id="videoinfolist"><li>Added: August 14, 2007</a></li><li><span>3 min 53 sec</span></a></li><li><a href="http://www.youtube.com/watch?v=9AuN7asWDR4">Watch on YouTube</a></li></ul></div></div>

And the CSS:

.videocontainer {	margin: 0 0 10px 0;	border-bottom: dotted 1px #635C5A;}.videothumbnail {	float: left;	margin: 0 10px 0 0;}.videothumbnail img {  padding: 1px;  border: 1px solid #FFF;}.videotitle {	font-size: 14px;	margin: 0 0 5px 0;}.videodescription {	font-size: 14px;	margin: 0 0 10px 0;}#videoinfocontainer {	margin-bottom: 1em;	overflow: hidden;	width: 460px;}#videoinfolist {	list-style-type: none;	margin: 0;	padding: 0;}#videoinfolist li {	font-size: 10px;	border-left: 1px solid #635C5A;	float: left;	line-height: 1.1em;	margin: 0 .5em 0 -.5em;	padding: 0 .5em 0 .5em;}#videoinfolist li span {	font-weight: bold;}

If anyone can help me, please do! I tried studying the YouTube source code, but it's filled with all sorts of things that I most likely don't need, and it's throwing me off. And feel free to tell me that what I already have isn't working, or could be done much simpler. I'm all for that.Thanks in advance so much

[Ingolme]

You can float the <ul> element to the right and give it a left border, something like this:

.videoinfolist {float: right;width: 100px;margin: 4px;border-left: 2px solid black;}

And put the <ul> element mark-up before the other content.You shouldn't use ids, use classes instead, since this is going to repeat and you can't have an id more than once in a document.

<div id="videoinfocontainer"><ul id="videoinfolist">

[Kingy]

Yes multiple id's are illegal, so to make it visual..

<div class="videoinfocontainer"><ul class="videoinfolist"><div class=" etc..

Because you can declare a class as many times as you like in a document.

[rzea]

I did the video info as a list. Perhaps not the best?

Honestly, I consider your layout WAY easier to read.To address your question, you are clearly using tabular data, for that you can... you 'are allowed'...it's 'valid' in your case... to use a table. Of course, you can always do it with DIVs and CSS, you have some solutions above my post, but I think you can go the normal way and use a table for your search results, all you are displaying is repetitive tabular information and that's what tables are made/used for.

[mr_director]

Thanks so much guys, for all your help. Ricardo, I have considered using tables, but I hear pretty consistently not to use them. But come to think about it, I don't know why. Perhaps that is a good solution.Ingolme, I put your code in place and it's doing the same thing I was running into before I just settled on a horizontal list at the bottom. Take a look:I'm not sure if it's other CSS conflicting or whatnot. And I have no idea why this is happening, but as soon as I add the float:right code, the bullets reappear regardless of my list-style-type: none; bit.Any ideas? Here's the updated CSS. Changed over to classes instead of ids. HTML did not change except for the class to id switch, too.

.videoinfocontainer {	margin-bottom: 1em;	overflow: hidden;}.videoinfolist {	list-style-type: none;	margin: 0;	padding: 0;	float: right;	width: 100px;	margin: 4px;	border-left: 2px solid black;}.videoinfo li{border-left: 1px solid #000;float: left;line-height: 1.1em;margin: 0 .5em 0 -.5em;padding: 0 .5em 0 .5em;}.videoinfolist li span {	font-weight: bold;}

[Ingolme]

Like I said, you have to put the <ul> tag before the rest of the content of the box.

<ul><li> ... ..... ..</li></ul>The rest of the content here

And Ricardo is right. Tables aren't forbidden, they're there for a reason, people just use them for te wrong reason.Tables are there to organize tabular data.

[mr_director]

Hey Ingolme, I tried moving it before the thumbnail box and before the title box. It would appear that no three elements can exist on the same horizontal plane. Take a look: http://www.collegeisamovie.com/?page_id=416

[rzea]

The people that tell you not to use tables in your case for these search results and don't know why are the same people that say that Macs are still so much better than PCs... and of course, they don't know why.Again, in my opinion, you could use tables in this case...Anyway, here's a solution that might work for you for these results, it might need a little tweak at some point because there's no way to know what are the exact requirements that your search results need.So what you need to do is to 'separate' the pieces that make your results:1. A picture2. A description3. Video informationWith that in mind you could use the following HTML code:HTML:

<div class="sr-container">  <div class="sr-picture"><img src="..." alt="Your alt text" width="130" height="78" /></div>  <div class="sr-description">The video description goes here...</div>  <div class="sr-information">	<ul>	  <li><strong>Added:</strong> 08/14/07</li>	  <li><strong>Duration:</strong> 3 mins 53 secs</li>	  <li><a href="#">Watch on YouTube.com</a></li>	</ul>  </div>  <hr /></div>

And now position the three parts and style them a little:CSS:

/* Search results */div.sr-container { 	width:575px;	height:78px;	border:#000 1px solid;	font:normal .7em Arial, Helvetica, sans-serif;	background:#f00; /*red*/}div.sr-container hr {	clear:both;	display:none;}div.sr-picture,div.sr-description,div.sr-information {	float:left;	width:130px;	height:78px;	background:#cc6; /*tan*/}div.sr-description,div.sr-information {	width:325px;	margin-left:5px;	background:#fff; /*white*/}div.sr-information {	width:110px;	background:#66f; /*purple/blue*/}div.sr-information ul {	list-style-type:none;	margin:0;	padding:0;	font-size:.8em;}div.sr-information a {	display:block;	color:#036;	text-decoration:underline;	padding:1px;}div.sr-information a:hover {		color:#fff;	background:#000;	text-decoration:none;}

BTW, sr stands for 'search results'.I put background colors to the 'parts' so when you are seeing this on a browser you can easily see which part is which.Hope this helps.

[mr_director]

Hey Ricardo, thanks for the code. I tried copying and pasting it exactly just to see what it would generate. Check out the following link to see what's up:http://www.collegeisamovie.com/?page_id=416It's not working. Looks like it's even further than what I was trying to do. All of the items are floating left in three separate rows. Any other ideas? Tables ?

[rzea]

I can't see anything, as a matter of fact, the page does not render correctly neither in Firefox nor IE7 (not to mention IE6).However, by what you describe seems like you haven't placed the CSS properly. Either create a CSS file and link it, or embed it in the 'demo' page you did.Let me know.

[mr_director]

You were right, had a code mix-up. First of all, thank you so much for your help. I fixed the issue on my end, and now I'm faced with three new problems:1. The first issue is that the description plows through the bottom border of the entire container. Is there a way to fix that so if the description is longer, it can just keep going, pushing the bottom border down rather than running ontop of it?2. I need to put a solid border between the description and the video info. data on the right. When I put the border-left on the video data, it only stretches down as far as the video data goes. Don't like that. I want a border going all the way down, from top to bottom like YouTube does:But when I put a border-right on the description, even 1px it pushes the video info. data onto a new line. I'd like to add that 1px, plus about 5px of padding on each side as to not cram it together without it pushing the data on a new line.3. My last issue is creating two separate DIV classes within the description one -- one for the title and one for the actual description. In the picture above, it looks normal, but that's because I'm just using a BR in between, but I think having two separate elements, one for title and one for description, is more graceful. But simply adding another DIV (copying the same attributes for the description DIV) for the title pushes the description down:Any and all help is much appreciated!

[rzea]

Hello,The following code will solve *practically ALL the problems you mentioned:HTML:

<div class="sr-container">  <div class="sr-picture"><img src="http://farm4.static.flickr.com/3176/2679506582_4d454c0a74.jpg?v=0" alt="Your alt text" width="130" height="78" /></div>  <div class="sr-description">	<h1>This is the title</h1>	<p>The video description goes here...dwqqwdwqd wqd wqd wqd wqd wqd wqdwq dwq dwq dwqd wqd wq The video description goes here... he video description goes here...dwqqwdwqd wqd wqd wqd wqd wqd wqdwq dwq dwq dwqd wqd wq The video description goes here... he video description goes here...dwqqwdwqd wqd wqd wqd wqd wqd wqdwq dwq dwq dwqd wqd wq The video description goes here... he video description goes here...dwqqwdwqd wqd wqd wqd wqd wqd wqdwq dwq dwq dwqd wqd wq</p>  </div>  <div class="sr-information">	<ul>	  <li><strong>Added:</strong> 08/14/07</li>	  <li><strong>Duration:</strong> 3 mins 53 secs</li>	  <li><a href="#">Watch on YouTube.com</a></li>	</ul>  </div>  <div class="clear"></div>  <hr /></div>

CSS:

/***** Search results *****/div.sr-container { 	width:565px;	padding:5px;		font:normal .8em Arial, Helvetica, sans-serif;	color:#B9B9B9;}/*These are the three 'blocks/parts' that conform the search results*/div.sr-picture,/*Thumbanil*/div.sr-description,/*Explanation/description of the video*/div.sr-information /*Information/Attribues of the video (Duration:, Added:, link)*/{	float:left;	width:125px;	}div.sr-description,div.sr-information {	width:295px;		padding:0 5px 0;}/*Special declaration for standards compliance browsers. In other words IE6 is not capable of reading this declaration.*/html>body div.sr-description {	margin-left:10px;}div.sr-information {	width:115px;	min-height:80px; height:auto !important; height:80px; /*IE6 doesn't understand what 'min-height' is, so we use "height:auto !important; height:80px;" to make it understand that we want 80px as a minimum height*/	margin-left:0;	padding:3px;	border-left:#666 1px solid;}/*This is the blue title in the Description area*/div.sr-description h1 {	margin:0;	padding:0;	font-size:1.2em;	color:#53ABD5;}/*The thumbnail/picture*/div.sr-picture img {	border:#fff 2px solid;}/*Style the list items that conform the 'video information' area*/div.sr-information ul {	list-style-type:none;	margin:0;	padding:0;	font-size:.8em;}/*Links inside the 'video information' area*/div.sr-information a {	display:block;	color:#53ABD5;	text-decoration:none;	padding:1px;	font-size:.90em;}div.sr-information a:hover {		color:#fff;	background:#000;	text-decoration:none;}/*This DIV makes the div.sr-content expand in Firefox*/div.clear {	clear:both;}/*This is the dotted line that separates each result. Remember that IE6 renders dots as dashes.*/div.sr-container hr {	height:1px;	border-top:#666 1px dotted;	border-bottom:none;	border-left:none;	border-right:none;	margin:10px 0 0;}

Now, to answer some of your questions so you can understand how things work:

1. The first issue is that the description plows through the bottom border of the entire container. Is there a way to fix that so if the description is longer, it can just keep going, pushing the bottom border down rather than running ontop of it?

R/. The problem there was because the div.sr-container had a fixed height (78px), so no matter how much content that container had, it wasn't going to expand. All you need to do is remove the height property.

2. I need to put a solid border between the description and the video info. data on the right. When I put the border-left on the video data, it only stretches down as far as the video data goes. Don't like that. I want a border going all the way down, from top to bottom like YouTube does:

*R/. The solution I'm giving you above has the border on the video 'Information' area (where the blue Added:, Duration:, etc. items are). As long as this area is longer than the 'Description' area is, then it'll be fine. But if the 'Description' area is longer than the border will not extend it's height. You need to decide which area/block will ALWAYS be longer, looking at Youtube's screenshots, the video 'Information' area is longer, so I put the line on that block.There's a solution for this is to use an image of 1px gray as background in the div.sr-container DIV, giving it a left starting point and then repeating it on Y. However, I didn't do this because if the 'Information' area, which is the one I assumed, is always longer than the 'Description' area then there's no need to mess around with images and backgrounds.

...but when I put a border-right on the description, even 1px it pushes the video info. data onto a new line.

R/. That's because all the DIVs (including widths, paddings, margins and borders) were exactly matching 575px. One more pixel anywhere and that'd force the 'Information' area to wrap.

3. My last issue is creating two separate DIV classes within the description one -- one for the title and one for the actual description.

R/. There's no need to create DIVs where they are not needed. For the title I used an <h1> and for the text I used a paragraph <p>.---Honestly this is too much hassle for tabular data, no question about it. That stupid sense of 'incapacity' (and this is not personal mr_director because I feel this ALL the time, believe me, ALL the time...) sometimes makes us look for complicated solutions for something SO incredibly simple.One last thing: I personally like your first layout (with the video 'Information' area at the bottom) way better.Hope all this information helps.Let us know how it goes...EDIT--FYI the code I gave you above works on: Firefox 2.x, Opera 9, Safari 3.x, IE7 and of course, IE6.

[rzea]

So, did it work?

[mr_director]

Hey Ricardo, I can't thank you enough! Sorry for not getting back to you sooner. I've just now started to implement the changes. All of your suggestions worked great. And thanks for explaining things to me. It's much better than just copying and pasting things. I tweaked some of the data. I'm trying to figure out how to make the video information <ul> not put spaces inbetween the actual <li> elements. I'm also trying to figure out how to control the center description block -- making the width a little smaller but not moving the other elements. I don't have the capabilities to post a screen shot right now, but I will do that later today. I think that'll make things much easier to see. Thanks again.

[mr_director]

Hey Ricardo, here's the picture:I've tried manipulating the numbers a bit. I'm trying to:

• Eliminate the spaces between the <li> elements
• Make the description block smaller by about 5-10px (or increase the padding on the right, I suppose) so that it doesn't run so close to the gray line separating the video info.
• Push the video info. a tad.

How would I go about doing this?Here's the new CSS:

div.sr-container {	width: 565px;	padding: 10px 10px 10px 10px;  	color:#B9B9B9;	border-bottom:#666 1px dotted;}/*These are the three 'blocks/parts' that conform the search results*/div.sr-picture,/*Thumbanil*/div.sr-description,/*Explanation/description of the video*/div.sr-information /*Information/Attribues of the video (Duration:, Added:, link)*/{	float:left;	width:125px;	}.videodescriptiontext {	 font-size: 12px;}div.sr-description,div.sr-information {	width:300px;	}/*Special declaration for standards compliance browsers. In other words IE6 is not capable of reading this declaration.*/html>body div.sr-description {	margin-left:10px;}div.sr-information {	width:120px;	min-height:80px; height:auto !important; height:80px; /*IE6 doesn't understand what 'min-height' is, so we use "height:auto !important; height:80px;" to make it understand that we want 80px as a minimum height*/	margin-left:0px;	padding: 3px 3px 3px 5px;	border-left:#4A4A4A 1px solid;}/*This is the blue title in the Description area*/div.sr-description h3 {	margin: 0 0 5px 0;	padding: 0;	font-size: 14px;	color: #53ABD5;}div.sr-description h3 a {	margin: 0 0 5px 0;	padding: 0;	font-size: 14px;	color: #53ABD5;}div.sr-description h3 a:hover {	margin: 0 0 5px 0;	padding: 0;	font-size: 14px;	color: #FFF;}div.sr-description p {	font-size: 12px;}/*The thumbnail/picture*/div.sr-picture img {	border:#fff 1px solid;}/*Style the list items that conform the 'video information' area*/div.sr-information ul {	list-style-type: none;	margin: 0;	padding: 0;	font-size: 11px;}/*Links inside the 'video information' area*/div.sr-information a {	display: block;	color: #53ABD5;	text-decoration: none;	padding: 1px;	font-size: 11px;}div.sr-information a:hover {		color: #fff;	text-decoration: none;}/*This DIV makes the div.sr-content expand in Firefox*/div.clear {	clear:both;}

Here's the new HTML:

<div class="sr-container">  <div class="sr-picture"><img src="/movies/images/thumb_whitehouses.jpg" alt="" width="120" height="72" /></div>  <div class="sr-description">	<h3><a href="http://www.collegeisamovie.com/?page_id=555">Fire and Pumpkins</a></h3>	<div class="videodescriptiontext">Bust out the hair spray and light up the pumpkins. In this thrilling short adventure from The Village at Science Drive, Tyler, Amanda, and I prepare for Halloween. Tyler's got a surprise to share, Amanda's got a trick to show, and I've got a question to ask: What.</div></div>  <div class="sr-information">	<ul>	  <li><strong>Added:</strong> 10/31/06</li>	  <li><strong>Duration:</strong> 2:30</li>	</ul>  </div>  <div class="clear"></div></div>

[rzea]

mr_director, no problem, I'm more glad than you because you appreciate the comments/explanations in the code :)Getting to your questions:I don't have the file I used to create the code I gave you here with me, but I will take a 'blind' stab at your questions anyway.* Eliminate the spaces between the <li> elements:Add the following declaration:

/*Style the list items that conform the 'video information' area*/.../*This will remove the inline spaces from the items*/div.sr-information ul li {	margin: 0;	padding: 0;}

* Make the description block smaller by about 5-10px (or increase the padding on the right, I suppose) so that it doesn't run so close to the gray line separating the video info.and* Push the video info. a tad.Let's do these two at once.Since you need to push the video info area a little to the right, let's do that by increasing the width of the video description area while adding to it a small padding of 5px (you can add more padding, 10px for example, but then you'd have to subtract 5px from the width of video description area. Does that make sense?).

/*Make the description area wider (it was 300px) and add a padding - The total width is 320px.*/div.sr-description {	width:315px;	padding-right:5px;}/*Reduce the width of the information area in 20px (it was 120px) since these 20px were added to the description area above, this will ensure that the sum of all the elements fits in div.sr-container*/div.sr-information {	width:100px;	min-height:80px; height:auto !important; height:80px; /*IE6 doesn't understand what 'min-height' is, so we use "height:auto !important; height:80px;" to make it understand that we want 80px as a minimum height*/	margin-left:0px;/*!!! You can remove the px if the value is 0*/	padding: 3px 3px 3px 5px;	border-left:#4A4A4A 1px solid;}

Watch for the !!!, this means you can fix something in your CSS code.You are using pixels for your font's size, I suggest you stick to ems as I did in my code, it's more 'user friendly' since the fonts will escalate proportionally according to the user's/visitor's font browser settings.I see you also have some redundant properties, for example:

padding: 10px 10px 10px 10px;

Can just be:

padding: 10px;

I encourage you to try and think a little harder when in doubt (don't get me wrong, I like to help you with this ). I'm saying this because your questions were extremely simple to resolve, if you give it a shot yourself first I am 100% confident you can resolve in two seconds, I see you are very, very proficient with CSS, it's just a matter of training your eyes to detect the error in a glance Let me know how it goes, I hope the code above works.Later.

[mr_director]

Worked like a charm, Ricardo. Thanks again for the explanations. The page is now active:http://www.collegeisamovie.com/?page_id=416One thing that was confusing me in terms of figuring out the widths was this:

/*These are the three 'blocks/parts' that conform the search results*/div.sr-picture,/*Thumbanil*/div.sr-description,/*Explanation/description of the video*/div.sr-information /*Information/Attribues of the video (Duration:, Added:, link)*/{	float:left;	width:125px;	}

In this section, the sr-description and sr-information are both given a width of 125, but later they're redefined again independently:

div.sr-description {	width:315px;	padding-right:5px;}

Thanks for your comments on my knowledge of CSS. I've been doing web-site design for myself for many years, but I'm just now starting to really dive into CSS and understand the power of it, trying to figure out how to use that instead of HTML elements. I think I understand individual elements, but just not how they relate to each other, like the example above.

[rzea]

Hello mr_director,I'm glad it worked, I see the page now and it looks really good :)To answer your question:As you know all three areas (picture, description and information) have different widths, however, there are characteristics that apply to all three, for example: float:left;.Now, if I write every ID section separately it would look like this:

div.sr-picture {	float:left;	width:125px;	}div.sr-description{	float:left;	width:315px;	padding-right:5px;  }div.sr-information {	float:left;	width:100px;	...}

So, if all the sections are floated to the left, then there's no need to write float float:left; in every class, so what I do is that I stack all three sections in one declaration:

div.sr-picture,div.sr-description,div.sr-information {	float:left;	width:125px;	}

And then apply specific properties that pertain a particular section:

div.sr-description {	width:315px;	padding-right:5px;}

As you can see in the code above, I didn't put float:left; because I have already done that above. I "repeat" width but because the description area has a different width than the one I declared above. If I don't declare a width to the description area, then it will take the width I declared for the div.picture.Does that make sense?This method may look a little 'off' in your case here, since it could be a little easier to just write all the properties for the areas in their respective class, but I did it like this because this is a best practice when 'linking' classes across your CSS.Let me know if you need any more help.Good job and good luck with your project.Bytes,

[mr_director]

So how do I make sure that div.sr-description takes the 315 width defined and not the 125? Does it have to do with just making it separate and it will automatically accept it if it's defined within it's own class? Or does it have to do with where I put it in the CSS document? Does that make sense?

[rzea]

Yes, it does.Actually, your last two questions are one question (just saying them differently), AND you answered yourself at the same time lol.Let me explain."Does it have to do with just making it separate and it will automatically accept it if it's defined within it's own class?"You are right, just by making it separate, hence, in its own class, div.sr-description takes the 315px width. However, read the next answer and example about 'stacking'.Or does it have to do with where I put it in the CSS document?You answered yourself here too. It does have to do with where you place the class in the CSS document (this is called?... stacking, right answer). So, I guess you have discerned this already:If you have:

div.sr-description {	width:315px;}.........

And way down in your stacking order you then have:

div.sr-picture,div.sr-description,div.sr-information {	float:left;	width:125px;	}

Then div.sr-description will have a width of 125px and not 315px.:)Let me know if you have any more questions.Bytes!

[mr_director]

My mom can find my videos and access them with ease. That's proof to me that the layout is user friendly :)Thanks for everything, Ricardo.

[rzea]

110% agree, hehe.No problem, just let me know if you need help again.Bytes