Topic: 2 fixed size boxes side/side, centered? Pages that link to <a href="https://ozoneasylum.com/backlink?for=11022" title="Pages that link to Topic: 2 fixed size boxes side/side, centered?" rel="nofollow" >Topic: 2 fixed size boxes side/side, centered?\
 
Author Thread
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

 IP logged posted posted 08-13-2003 21:02 Edit Quote

Posted: Tue Aug 12, 2003 7:39 pm Post subject: 2 fixed size boxes centered - possible?

--------------------------------------------------------------------------------

Hey,

I would like to place 2 fixed size boxes side by side under a header graphic, and have all this centered. is this possible? I could do it as a transistional with a table (ala zeldman book example) but the left box is a vertical menu, which I figured would be a table. also, then the menu box would expand vertically with the content box. I don't want to nest tables, so where does that leave me?

any and all help appreciated.

thanks

bill


Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 IP logged posted posted 08-13-2003 21:12 Edit Quote

wcr one: Why not something like:

code:
<body style="text-align:center;">

  <div style="margin:auto;width:300px;">

    <div style="width:100%;">Header<div>

    <div style="width:50%;">Left column<div>

    <div style="width:50%;">Right column<div>

  </div>

</body>



Or have I misunderstood the problem?

___________________
Emps

FAQs: Emperor
ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

 IP logged posted posted 08-14-2003 07:26 Edit Quote

Emps: That wouldn't exactly work. The menu would be stacked on top of the content. There are two ways to do multicolumn layouts: absolute positioning or floating. Personally, I favor the float.

Here's how I would do it.


Try this HTML:

code:
<div id="container">

     <div id="header">Header</div>

     <div id="menu">Left Column (Menu)</div>

     <div id="content">Right Column (Content)</div>

</div>


...with this CSS:

code:
body {

     text-align: center;

     }

 

#container {

     text-align: left;

     margin-left: auto;

     margin-right: auto;

     width: ([i]width of the whole layout[/i]);

     }



#header {

     width: 100%;

     height: ([i]height of the header[/i]);

     }



#menu {

     float: left;

     width: ([i]width of the menu[/i]);

     }



#content {

     margin-left: ([i]width of the menu, same as above[/i]);

     }




[EDIT: That's an interesting phenomenon. Sometimes the text within the [ code ] tags ends up in the regular proportional font (Verdana), but when I reload the page, they go back to monospace (Courier, I suppose). I hit the reload button several times in a row, and the font seems to change randomly. You wouldn't happen to know anything about this, would you Emps?]




[This message has been edited by ozphactor (edited 08-14-2003).]

[This message has been edited by ozphactor (edited 08-14-2003).]
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 IP logged posted posted 08-14-2003 10:53 Edit Quote

ozphactor: Ahh nuts yep - I missed the float bits out of the style - I just threw it together and didn't bother testing it. A corrected version is:

code:
<body style="text-align:center;">

  <div style="margin:auto;width:300px;">

    <div style="width:100%;">Header<div>

    <div style="width:50%;float:left;">Left column<div>

    <div style="width:50%;float:left;">Right column<div>

  </div>

</body>



___________________
Emps

FAQs: Emperor
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

 IP logged posted posted 08-14-2003 19:51 Edit Quote

thanks for the info, i will give it a try tonight. I kept missing the container div auto margins.

a quick a web semantics Q: is nesting divs kosher web standards coding? obviously coding-wise and bandwidth-wise it is better than nested tables, but just wondering what the word is on nested divs.

thanks

bill
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 IP logged posted posted 08-14-2003 20:04 Edit Quote

wcr one:

quote:
is nesting divs kosher web standards coding?



Yes - there is no problem with this.

___________________
Emps

FAQs: Emperor
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 IP logged posted posted 08-15-2003 01:09 Edit Quote

My favorite way to do multicolumn layouts is like this:

1. Surround all of the column divs in one large div. give the large div position:relative.

2. make the center column (which will be the one that expands/contracts with the browser window size) a normal div with large margins. The margins should be large enough to accomodate the column(s) on either side.

3. position the remaining columns absolutely (position:absolute), and set them up to fill in the space that you left with the margins of the other div.

I believe that's what I do for the "cleanwhite" layout of slimeland.com.

If you need all of the columns to be the same height, honestly I haven't found a way to do that without tables. However, you can at least keep the tables really simple (no presentational attributes), and use CSS for the majority of the styling.
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

 IP logged posted posted 08-15-2003 07:57 Edit Quote

fantastic! got it to work, though I had to fart around a few of the particulars to get it to work right. thanks a bunch.

as for column heights, mr. slime, I must not quite understand what you mean about getting them to be the same height, but perhaps that is particular to a fluid site. mine has set widths because some pages are relatively text free, and too much expansion makes for a very deserted looking div. but even with a fluid site, if you set the divs to a fixed height, and overflow:auto it will keep a nice set size in ie.new and nn6.2 at least.

hey, thanks again, it is always appreciated.

bill
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 08-15-2003 14:37 Edit Quote

What slime means is that you can't get two divs to expand their height equally - if you want the div's to have a fluid height, rather than setting the height to a fixed measurement.

Setting a fixed height and suing the overflow:auto; is certainly a plausible option, but doesn't change the inherent problem.

Hopefully CSS3 will address that



ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

 IP logged posted posted 08-15-2003 22:02 Edit Quote

From what I've heard, CSS3 has a whole new system for dealing with multicolumn layouts. Can't wait

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

 IP logged posted posted 08-15-2003 22:21 Edit Quote

You can also fake the height thing with background images.
In slime's example of the three columns, let's say you have your outer columns set to 150px wide. You simply make a 150px wide, 20px tall block of the color you would like your outer columns' backgrounds to be. Set the background of your body to be one of the images, top, right, repeat-y (that's for the bg of the 3rd column.)
Set the background image of the container div to the other image, top, left, repeat-y (that's for the bg of the 1st column).
Assuming the middle column is always the longest, this works like a charm.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu