Forum Moderators: not2easy
I am making an attempt to design a site with as much css as possible. I designed it in Illustrator first to get a feel for how I wanted it to look but am having difficulties translating it to css. Two things:
1. Can boxes be placed side by side? I want two boxes side by side, one with content, one with navigation. Basically I want it to look like this:
logo . . . . . . . . . nav nav
-------------------------- ----
¦ content content content ¦. . .¦
¦ content content content ¦. . .¦
¦ content content content ¦nav¦
¦ content content content ¦nav¦
¦ content content content ¦nav¦
¦ content content content ¦nav¦
¦ content content content ¦. . .¦
¦ content content content ¦. . .¦
-------------------------- ----
Any idea on what I have to do to make this work? I have tried the right and left float thing but have had no success...
and
2. I want the site to be centered vertically and horizontally in any browser resolution. The only way I can figure to do this is by nesting the body contents in a centered table.
ie. <body><table height="100%" width="655" border="0" align="CENTER"><tr><td>
site contents
</td></tr></table></body>
Is there a better way to do the same thing in css? I have found info on centering a site vertically or horizonally but not both at the same time. I don't want to position things absolutely as I am looking to have the site centered in most browser resolutions. Any ideas?
1. Can boxes be placed side by side?
You set up two <div>s. Make one float: right and the other float: left. There are several bugs with this in IE which are dicussed at length on Webmaster World. Search for "tan hack" or "holly hack".
Here's a related thread:
[webmasterworld.com...]
2. I want the site to be centered vertically and horizontally in any browser resolution.
If you want to center horizontally, you can set up one "wrapper" <div> as opposed to a table. And make the width 780'ish or less to accomodate the 800X600 crowd. I wouldn't worry about smaller sizes. It's up to you though.
Regarding centering vertically:
[webmasterworld.com...]
Right after posting this question, I found this: [webmasterworld.com...] which touches on both my questions (and was right under my nose the whole time).
I have been playing with the code 4css posted for tufduck25 and am finally having some success with my boxes in Mozilla, at least. IE doesn't seem to want to play nice just yet (it's placing my right float box in my left float box).
I'll keep plugging away. Any other suggestions are most welcome. :o)
