View Full Version : Columns with css, that look like tables?

02-08-2005, 06:00 AM

I started out pretty well coding the layout to my blog, but then I got in over my head..

This is my temp url for the time being. (http://talesforums.com/)

As you can see, I made the section under the banner exactly how I wanted it. Although I had to use tables to get it that way. I tried using css columns, but when you make them float over, the bottom border gets hidden.

Can someone please suggest a better way for me to go about making the "content" area for my site, without tables?

I have one other question that isn't as important. I was wondering, how can I add a shadow on the right of my layout and bottom? I already have the shadow done in photoshop, but I wouldn't know how to add it with css.


02-08-2005, 06:07 AM
first u should be closing ur div tags, u have quite a few open, whole point of using divs is trying to avoid using tables, mess around with float:left; and float:right; they are the same thing as align=left and align=right, put your entire content in a single div set that width then have the header div
then two more divs one floated left and one floated right

02-08-2005, 09:10 AM
'a list apart' to the rescue :)

02-08-2005, 09:58 AM
Keep in mind, though, if you only need different background colors and borders, you can use a backward approach... overwrite the background color of the wrapper with the bg color of the content, and what's left is the bg color of the shorter column.

I typed up an example (http://richardmedek.com/temp/example6.htm) for you... hope it helps,

02-10-2005, 12:50 AM
I'm recoding the layout without working off of wordpress this time. For some reason the h1 image isn't showing up though. (The image I am using for my banner)

Any ideas why?


02-10-2005, 03:16 AM
Looks like you either need "#h1" in the CSS or "<h1>Banner</h1>" in the html.

I'd go with the latter... if you are styling a header, make sure it's a header-- not a division of the page with no meaning.

02-10-2005, 03:20 AM
Thanks, I didn't realize I needed the "#" infront of the "h1".

02-10-2005, 03:31 AM
Well, first answer this... is what you are styling a header? In other words, if your website was about, say, apples, would your website be something like this?

Glorious Apples! A Tribute.
-The History of Apples
-text about apples

etc. In this case, the Glorious Apples bit should pretty much be your <h1>. If you would rather have the banner be the part that means the Glorious Apples thing, say a photo of a big juicy apple, then you should mark up the HTML with an "<h1>Glorious Apples</h1>" and use CSS to replace that text with the image.

h1 {
text-indent: -9999px;
width: 700px;
height: 100px;
background: url(..images/apple.jpg) no-repeat top left #fff;

Note, this is only one way to do it (and admittedly, not the best) but it's one approach. If you're interested in diving into this a little more, check out "image replacement" in Google and you'll be overwhelmed with different methods and reasons to do/not to do it.

Hope this helps,

02-10-2005, 03:49 AM
try using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can code it visually in there and then copy the source, its fairly easy to do once you learn what all the buttons do

02-10-2005, 03:56 AM
try using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can code it visually in there and then copy the source, its fairly easy to do once you learn what all the buttons do

While you're at it, make sure you use deprecated tags and tables for layout... Hey PixelPets, the whole point of us learning how to use css and html is to avoid using crap Dreamweaver code... :)

02-10-2005, 04:00 AM
I think I'm getting the hang of it. Right now I'm leaving the "h1" text just as "Banner" because I don't have a name for my Blog right now. I do have most pages drawn on paper though so I have the main idea down.

It looks like its working :)


Thanks guys!

02-10-2005, 04:17 AM
No problem :)

02-11-2005, 01:00 AM
Hmm..I can't figure this out. When I view my layout in Firefox, there is a 3 pixel space at the bottom of the layout. (under the right nav). This is how I want it to look, but in IE, it adds a large gap. Any ideas?

Also, how can I put content on the right nav and in the main area without floating it? When I use the float code, it winds up overlapping my whole border and the layout doesn't stretch with the content.

Thanks :)

02-11-2005, 09:22 PM
As far as IE, I dunno... you'll have to be more specific (show code/ a link). I only have IE on Virtual PC so testing these things on a whim is a pain in the rear.

About positioning: it could be that you are missing a few things from your floats, like a clearing element... here's a good link on positioning using floats:


Or, you may want to give absolute and relative positioning a shot (check google for a good start on that)... I'd say the floats could be your solution, though.

If you have trouble, still, go ahead and post a new thread so this one doesn't ramble all over the place... helps with the forum searches :)

Hope this helps,