Some problems with CSS tables.

[Nevsan]

I know the basics of setting up div classes and such for laying out your page but I've run into a little problem.

Ok, on the footer of my page, I want to set it up so I have a left corner, a right corner, a middle graphic, and a div with a background of a bar in between (on each side of the middle graphic). (I'd prefer that the background it doesn't go behind the other graphics since I'm using png's with transparency, but it would probably be ok if it went behind the middle graphic.).

I was considering using tables but I would much rather prefer doing this in CSS. I though about setting up a div for each corner, and in the middle putting another div with the background (the bar) and the middle graphic centered in it. But whenever I attempt it, they always break to another line..


Oh, and BTW I have the footer in it's own div. All the contents of the page are in a fixed width div (a frame for everything). Sorry, but I don't have an example of my page up right now....

 

[painperdu]

This could get ugly but you might use something like:

<div style="height:100px;width:400px;border-style:solid;border-color:black;border-width:2px">
 <div style="text-align:left;height:100px;width:100px;margin-left:0px">Left</div>
   <div style="text-align:center;height:100px;width:200px;margin-top:-100px;margin-left:100px">M i d d l e</div>
 <div style="text-align:right;height:100px;width:100px;margin-top:-100px;margin-left:300px">right</div>
</div>

Also, you could play around with 'Float' but this may be more unpredictable than margins.

 

[Anthony]

I'd encourage you to poke around here, its a valuable resource:
http://glish.com/css/

 

[Nevsan]

Ok, I got my footer to render correctly by specifying a right-margin in the middle part. But now I have another problem. Ok, I have my central content in a CSS box called "middle". It's width is determined by it's containing frame (Since it's set to 100%) but I had a fixed height on it so I can see how things were rendering.

However, I'm not going to have the whole thing a fixed height, I want it to expand to hold whatever content it needs, so I didn't specify a height. Thing is, I have the middle div'd up into 4 sections: left-border, navigation, content, and right-border. Basically I want the whole "middle" box to expand to be as big as the largest box inside it (Most likely the content box).

However, it ends up that even though the whole "Middle" box expands to fit it, the borders remain and 0 height even though I have their height on 100%. They only expand when I add something inside of them (which is pretty pointless since their just borders). I've tried setting a margin-bottom, but that doesn't seem to work either.... It might be because I have them on float: left, but I pretty much need to do that....

The only time the other boxes expand to fit the container box is when I specify a height for it or each box.

 

[Nevsan]

Ok, I fixed my problem by putting two layers over the bordered area and aligned a background to the left and right on each layer, then set the inside boxes to a margin equal to the border width. If anyone's interested about this you can ask.

 

[Anthony]

I got confused with that explanation -- can you just post the code? Thanks.

 

[blouis]

alistapart.com

 

[Nevsan]

Basically it goes like this. It creates a nice fluid border along the left and right sides of any box.

CSS:

.middle_frame_left_border {
	width: 100%;
	float: left;
	.
	.
	.
	background-image: url(Images/left_border.gif);
	background-repeat: repeat-y;
	background-position: left;
}

.middle_frame_right_border {
	width: 100%;
	float: left;
	.
	.
	.
	background-image: url(Images/right_border.gif);
	background-repeat: repeat-y;
	background-position: right;
}

.middle_content {
	width: 100%
	float: left;
	.
	.
	.
	margin-left: 30px; /* Width of border */
	margin-right: 30px;
}

And the HTML:

<div class="middle_frame_left_border">
<div class="middle_frame_right_border">
	<div class="middle_content">
		<!-- Content -->
	</div>
</div>
</div>

Dunno if anyone's thought of this before but I googled my ass of and never found it so here it is...

 

[painperdu]

I'm missing something here. Why can't you just use the right and left border properties of the div box?

Are you trying to end up with something like the below shape?

 

[Nevsan]

I'm talking about using custom images for the border. Not just the plain CSS borders

 

[painperdu]

Got it!

 

[Nevsan]

Ok, I finally got a preview of my site posted up.

http://homepage.mac.com/nevsan/

I got things to work fine in Safari, IE 5.2 Mac, Netscape 7 Mac, and kind of in Opera. However it really screws up in older Windows IE (I think the newer ones too maybe...)

Anyway, if you could tell me how it renders in your browser I'd like to know.....

(BTW, the content is just place-holder for now, none of the links work.)

Just curious but is there any way to preview a site in other browsers (Notably Windows browsers) without actually going to another computer. (ie. is there like a browser emulator website?)

 

[painperdu]

Here is a rough screen shot of how it renders in IE 6.0:

Also, it scrolls about 25px to the right.

 

[Nevsan]

Looks like I'm gonna have to use some IE parsing errors and hacks to get this working. I'm also gonna have to use some JavaScript so I make sure that browsers that don't support .PNG transparency can load .GIF's instead....