3 column layout problem

[pulsewidth]

Hi,

I'm trying to create a 900px-wide 3-column layout that is centered in a container. But I'm having various problems and my knowledge of CSS programming is intermediate. For instance in some browsers such as the latest IE, the third column breaks the container, but it doesn't happen in Netscape or Opera. The second column is suppose to contain 4 navigation buttons that should be aligned to the bottom, but it seems that the vertical-align: bottom; property doesn't work properly.

Can anyone please help me figure out how to fix the problems? I'd like to use this as a template for browsers compatible at least with IE 5/Win and Netscape 6.

You can view the page here.

Thanks.

[Leprakawn]

Maybe this page from HTMLSource will help you out.

PS: Thanks for the link!!

[pulsewidth]

Thanks for the link.

Okay, I at least figured out why my container was breaking. I had a fixed size of 900px width and when I added a border around <img src> in the second column it collapsed the whole structure. So I've made my buttons narrower to accomodate the fixed width structure.

I've still have yet to grasp how to vertically align the buttons properly. I've been looking through various tutorials and I'm still not getting it. Do the stack of 5 images as a group need to vertically align to another <img> instead of aligning themselves within the column? If that's the case, then it seems a bit crude to create another <img> element that is as long as the column to align them properly.

[Leprakawn]

This is what I would probably do:

<div id="contentcenter">
<table border="0" cellpadding="0" cellspacing="0" style="height:643px;">
<tr>
<td valign="middle">
<img src="./images/scrap.jpg" width="150px" height="25px" alt="" border="0" /><br />
<img src="./images/scrap.jpg" width="150px" height="25px" alt="" style="padding-top:?px;" border="0" /><br />
<img src="./images/scrap.jpg" width="150px" height="25px" alt="" style="padding-top:?px;" border="0" /><br />
<img src="./images/scrap.jpg" width="150px" height="25px" alt="" style="padding-top:?px;" border="0" /><br />
<img src="./images/scrap.jpg" width="150px" height="25px" alt="" style="padding-top:?px;" border="0" />
</td>
</tr>
</table>
</div>

Just adjust the padding-top snippet as needed, and that should hopefully do the trick.

BTW, the top img should not need one because there is nothing above it. And if padding-top does not work, change it to margin-top. Finally, if the CSS fails for the space btwn the imgs, you can use vspace="?px"!

NOTE: vspace would be used like this: <img src="./images/scrap.jpg" vspace="5px" />

[Till]

Originally Posted by pulsewidth

(...) but it seems that the vertical-align: bottom; property doesn't work properly. (...)

It never worked (as expected) for me. I always work around with padding-top/margin-top properties to achieve the same effect.

Till

[pulsewidth]

Interesting. I was going to use a table as a last resort for the nav buttons. I wanted to steer clear of it because it's frowned upon by the CSS community if used as a layout tool and it may not validate.

So I tried the table technique and so far it separates the images in the column properly using the <style="margin-top:?px;"> property in the <img> tag. So the layout more or less looks fine on Netscapes 6, 7, 8, Foxfire, Opera 8, and IE6/Windows.

The height of the columns still don't match up in IE 5 or IE 5.5. So I decided to decrease the height of the banner in the left column by a few pixels to fit the column within the container. Now it's only the right column that sticks out of the column. I'm wondering if it's because instead of padding it, I gave it a border, and that's what makes it break out of the container in IE 5.

[Leprakawn]

Just tell everyone in that little CSS community that they can shove it where the sun does not shine.

[smithj7]

I'm not quite sure why you want to set px width for your css style sheet. (I work for blind services in florida and am trying to redo our site using css because of the power it has to make sites accessible. % width helps with this be layout tables or css).

However, I too am working on a three column layout for "front page". I've learned a lot from http://css-discuss.incutio.com/?page=ThreeColumnLayouts The page not only provides good information regarding different bowers issues but have some great links to css style sheets for 3 column layout.

Good luck

[Leprakawn]

Too bad you have not learned to not use Front Page yet!

[smithj7]

I was kinda of confused and sadden by your comment.

I'm not really a front page advocate. I understand html, am learning css and xhtml through this site and other sites and provide training to other web folks on accessiblity issues related to persons who are blind as more or less "other duties as assigned".

I'm a lowly state employee, who uses the tools available based on parent organization and funding. First site I put up was using notepad.

I have an old version of front page. I work for a state agency. I was in department of labor and front page was the going product. Then we moved to department of education (2000) and they used dreamweaver and I was unable to get an upgrade to front page. I finally asked for dreamweaver since that was what everyone else in department of education was using and finally got the requested software - a WEEK AGO.

Dreamweaver has some wonderful accessiblity features! I will be able to get material up in a more accessible format even faster.

I really am not a software "web person". But software helps me ensure that I can do all duties as assigned. I am totally responsible for both content and web "master" duties as part of my duties as assigned, but when I just got my evaluation, this part of my job was so unimportant to my boss that there was not even a listed on my evaluation item(s) for this part of my job. I don't think that our site is world class ( http://dbs.myflorida.com/ ), but I try to ensure using whatever software is availbale that it is kept up to date and accessible.