Topic: 2 fixed size boxes side/side, centered? (Page 1 of 1) $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? (Page 1 of 1)" rel="nofollow" >Topic: 2 fixed size boxes side/side, centered? <span class="small">(Page 1 of 1)</span>\$

wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 08-13-2003 21:02 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	posted 08-13-2003 21:12 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	posted 08-14-2003 07:26 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	posted 08-14-2003 10:53 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	posted 08-14-2003 19:51 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	posted 08-14-2003 20:04 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	posted 08-15-2003 01:09 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	posted 08-15-2003 07:57 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	posted 08-15-2003 14:37 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	posted 08-15-2003 22:02 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	posted 08-15-2003 22:21 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.

Topic: 2 fixed size boxes side/side, centered? (Page 1 of 1) $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? (Page 1 of 1)" rel="nofollow" >Topic: 2 fixed size boxes side/side, centered? <span class="small">(Page 1 of 1)</span>\$

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 08-13-2003 21:02

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

posted 08-13-2003 21:12

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

posted 08-14-2003 07:26

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

posted 08-14-2003 10:53

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

posted 08-14-2003 19:51

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

posted 08-14-2003 20:04

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

posted 08-15-2003 01:09

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

posted 08-15-2003 07:57

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

posted 08-15-2003 14:37

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

posted 08-15-2003 22:02

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

posted 08-15-2003 22:21

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: 2 fixed size boxes side/side, centered? (Page 1 of 1)

Insert Slimies »

Insert UBB Code »