fixing size of page layout sections to replace tables

[Harry]

Hi.

I'm trying to get a page layout using css instead of tables, where the
various sections have fixed widths even when you resize the browser window.

The css below produces the correct layout but I cannot get the center id=txt
section to fix at 700px.

Does anyone know how I can achieve this?

/* set margins, padding, and inline-level content alignment */
body,div { margin: 0; padding: 0; text-align: center }

/* set widths and float nav & ads div content boxes */
#hdr { margin-left: 100px; height: 150px; }
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
/* note: if you change the widths above also change the margins in the rule
below */

/* set side txt margins and height */
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }

/* ensure footer stays at the bottom */
#ftr { clear: both }

/* show boundaries and set image sizes - for clarity only */
#hdr, #ftr { background: aqua }
#nav, #ads { background: yellow }
#txt { background: lime }

/* stretch image to represent content - for clarity only */
#hdr img { width: 250px; height: 25px }
#ads img { width: 75px; height: 100px }
#txt img { width: 150px; height: 200px }
Cheers,

--
Harry Smith

[Neredbojias]

To further the education of mankind, "Harry"
<cellerymail-harry<at>yahoo. co.uk> declaimed:

Hi.

I'm trying to get a page layout using css instead of tables, where the
various sections have fixed widths even when you resize the browser
window.

The css below produces the correct layout but I cannot get the center
id=txt section to fix at 700px.

Does anyone know how I can achieve this?

/* set margins, padding, and inline-level content alignment */
body,div { margin: 0; padding: 0; text-align: center }

/* set widths and float nav & ads div content boxes */
#hdr { margin-left: 100px; height: 150px; }
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
/* note: if you change the widths above also change the margins in the
rule below */

/* set side txt margins and height */
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }

/* ensure footer stays at the bottom */
#ftr { clear: both }

/* show boundaries and set image sizes - for clarity only */
#hdr, #ftr { background: aqua }
#nav, #ads { background: yellow }
#txt { background: lime }

/* stretch image to represent content - for clarity only */
#hdr img { width: 250px; height: 25px }
#ads img { width: 75px; height: 100px }
#txt img { width: 150px; height: 200px }

700px what? If width, you have that set to "00px".

--
Neredbojias
Infinity can have limits.

[Harry]

Yes, sorry.... that should have read

#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }

That was a mistake when I pasted the code, it does read 700px in the
stylesheet yet only the #nav and #ad sewctions

#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }

keep their widths when the window is resized.

--
Harry Smith
"Neredbojia s" <http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote in
message news:Xn******** *************** ***********@208 .49.80.251...
To further the education of mankind, "Harry"
<cellerymail-harry<at>yahoo. co.uk> declaimed:

Hi.

I'm trying to get a page layout using css instead of tables, where the
various sections have fixed widths even when you resize the browser
window.

The css below produces the correct layout but I cannot get the center
id=txt section to fix at 700px.

Does anyone know how I can achieve this?

/* set margins, padding, and inline-level content alignment */
body,div { margin: 0; padding: 0; text-align: center }

/* set widths and float nav & ads div content boxes */
#hdr { margin-left: 100px; height: 150px; }
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
/* note: if you change the widths above also change the margins in the
rule below */

/* set side txt margins and height */
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }

/* ensure footer stays at the bottom */
#ftr { clear: both }

/* show boundaries and set image sizes - for clarity only */
#hdr, #ftr { background: aqua }
#nav, #ads { background: yellow }
#txt { background: lime }

/* stretch image to represent content - for clarity only */
#hdr img { width: 250px; height: 25px }
#ads img { width: 75px; height: 100px }
#txt img { width: 150px; height: 200px }

700px what? If width, you have that set to "00px".

--
Neredbojias
Infinity can have limits.

[Schraalhans Keukenmeester]

Harry <cellerymail-harry wrote:

Hi.

I'm trying to get a page layout using css instead of tables, where the
various sections have fixed widths even when you resize the browser window.

The css below produces the correct layout but I cannot get the center id=txt
section to fix at 700px.

Does anyone know how I can achieve this?

/* set margins, padding, and inline-level content alignment */
body,div { margin: 0; padding: 0; text-align: center }

/* set widths and float nav & ads div content boxes */
#hdr { margin-left: 100px; height: 150px; }
#nav { float: left; width: 150px; height: 100% }
#ads { float: right; width: 120px; height: 100% }
/* note: if you change the widths above also change the margins in the rule
below */

/* set side txt margins and height */
#txt { margin-left: 150px; margin-right: 120px; height: 100%; width:
00px; }

/* ensure footer stays at the bottom */
#ftr { clear: both }

/* show boundaries and set image sizes - for clarity only */
#hdr, #ftr { background: aqua }
#nav, #ads { background: yellow }
#txt { background: lime }

/* stretch image to represent content - for clarity only */
#hdr img { width: 250px; height: 25px }
#ads img { width: 75px; height: 100px }
#txt img { width: 150px; height: 200px }
Cheers,

Have a link for us to see the thing in action? Does the code validate ?
(If not, that will be first answer you'll get next post... Make sure it
does!)

Sh.