22 replies to this topic

[qwerty]

I'm trying to redesign a page that had used a lot of nested tables, and it's very much a work in progress. I'm trying to do the whole thing with divs, some of them containing tables, but no nesting.

The problem is that I need to find a way to make two of the divs reach the same bottom point (even though their height is based on their contents and they don't start at the same vertical point) and then add another div below them that will span their combined widths.

The page in question is located here, the css file is here, and the two divs that need to end up at the same bottom point are "leftnav" and "content". (It's the presence of the "topnav" div that forces "content" to start at a lower point than "left nav"). I'm thinking that maybe topnav, leftnav, and content all need to be put into some common container.

I know the whole thing is a mess right now, but it's much better than it was when I started on it. I'll clean things up once I get it all working. Any help from real designers (I'm but a lowly SEO) would be much appreciated.

[websage]

Uhh, you have mixed tables and divs... Why not put everything in separate divs. Use the box model. Or better of, use one of these templates:

http://www.projectse..._3box/index.htm

http://www.benmeadowcroft.com/webdev/

Hope this helps.

[qwerty]

Thanks, but I don't think any of them are going to do it. I need to make it look like the original page without the nested tables, and that's going to involve a whole lot of messing around, I'm afraid.

[dimok]

Occasionally your site is unreachible for now - i have not seen your example.

I have an idea: set all width in % - i believe that this will solve most of problems

[qwerty]

I don't understand, dimok. Setting the widths to percentages will help me get the heights correct?

My main concern is the height of the div along the left. It needs to end at the same bottom point as the div directly to its right, even though they don't start at the same top point.

I don't suppose it's possible to tell the css to dynamically work out the height of a div -- something like height: (100% - 400 px) or something like that.

[qwerty]

This is a bad sign -- the current design doesn't work at all in Mozilla.

[dimok]

I missunderstanded you. Sorry.

I have tried a lot of combinations. No effect.

1. You shoud tell the style class in that manner:

<div class="leftNav">

instead of

<div id="leftNav">

('id' is an ID of the element not the class pointer)

2. Read W3C recomendations for some explanations of positioning:

3. I recomend you to try to make a little Javascript that will sets the position of the leftNav.

4. You design doesn't work in Mozilla
If you apply 1 and read carefully 2, the situation will change

BTW, try to use Mozilla DOM Inspector - it helps alot in understanding the code.

[Googlewhacked]

Hey querty,

Just out of curiosity, is there a particular reason that you are wanting to abandon the use of tables? While I am an advocate of clean & spider-friendly code, I do believe that tables can be used effectively to structure a page, while still staying spider friendly. (I do this kind of page "rework" all the time for my current employer...)

Since this page appears to be using the standard 2-column format, there is no reason I can think of that this wouldn't be "do-able" with only 1 nested table (a reasonable number, IMHO) if any are needed.

Feel free to contact me offline & I will be glad to assist.

- GW

[qwerty]

I'm not completely abandoning tables; it's just that there were many layers of nesting going on in the original design. I knew I had to take that out, so I saw it as an opportunity to replace all but the most important tables with layers.

Dimok is right about the design not working in Mozilla. I tried it early this morning and it's completely awful.

What I'm experimenting with now is putting the whole thing into a container div that will center the page, then the top banner in a div of its own, below that the top navigation, then another container that will hold the left and main columns (I found a way to guarantee they'll be the same height), then a footer.

The problem is that in the version I posted above, the left column starts below the top banner, so the top navigation goes to the right of the top of the left column. In order to make this work, the image that had been at the top of the left column needs to become part of the top navigation (it's actually used in the left column as a background image, so I've cropped the top of it and saved it as a new image). That way the left and main columns will start at the same height.

Googlewhacked -- any help you'd like to give would be greatly appreciated. This redesign is just a small part of a total site optimization, and I hadn't planned on it taking as long as it has so far.

[qwerty]

Latest update (this thing is turning into my diary):

I've cleaned things up a bit, and now I've got http://www.raisemyra...hoice/test3.htm

It still breaks in Mozilla, though -- of the two layers at the top of the page, neither one centers, and the second of the two doesn't even size itself properly.

[joker]

qwerty:

maybe I am misunderstanding your post but, why not just determine the height of your two divs, and then set the absolute position accordingly?

ie, assuming a screen 700 px high and div1.height=100px and div2.height=200px position div1 600px from the top of the screen and div2 500px from the top of the screen.

You could also write up a quick javascript to do it dynamically if you are worried about compatibility

could this work?

[qwerty]

I've got those 2 divs working ok now. My only problem at this point is that the 2 divs at the top aren't centering or getting the right width when I open the page in Mozilla or NS7. I think it may have to do with a row of tags that have a background image, because that's coming up when I try to validate the page.

[Ron Carnell]

I'm taking a break from preparing for company and haven't had a chance to look at the page, Bob, but thought I'd throw out a quick suggestion.

IE handles centering of block-level elements differently from more compliant browsers. For IE, we typically use text-align: center; in a container around the element to be centered. In other browsers, we should use margin: auto in the element itself. Combining these usually seems to work for me.

<div style="text-align: center;">
<div style="margin: auto;">
Some centered content
</div>
</div>

Don't know if that helps or not.

[Craig B]

You can't line up column heights in CSS unless you use a footer or use javascript to make the shorter columns the same length as the longer columns on a window resize.

This article describes it in detail!

edit: you can set the height but you can't set the height when you have dynamic content as you don't know the height of the content.

cheers,
Craig

[qwerty]

Craig --

I can't remember where I found it, but I've got those two layers at the same height using this code:

#bodyblock {
 position:relative;
 background: white;
 width:772px;
 padding:0;
 }


#left{
	margin-right: 0px;
	background: white;
	width: 118px;
	height: 100%;
	position: absolute;
	left: 0px;
    float: left;
}

#content{
    border-left:0px solid #000000;
    border-right:0px solid #000000;
    border-top:0px solid #000000;
    border-bottom:0px solid #000000;
	padding-top: 0px;
	padding-left: 60px;
	background: white;
	width: 644px;
}

"bodyblock" contains the two other layers, and as long as "content" is bigger than "left", "left" will take its height. I can't remember why exactly it works, but it does.

I tried Ron's suggestion to get the top to display properly, but no dice. I'm still playing with it, but at least now it's displaying the same in every browser (incorrectly) with the obvious exception of NS4, where it's a page full o' mud.

I may just have to give up and do it all in tables.

<added> And I am using a footer. Maybe that's why it's working.