Click here to get back home

How to let the layout laterals auto sizing?
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
How to let the layout laterals auto sizing? Neviton 03-26-2008
Posted by Neviton on March 26, 2008, 11:03 am
Please log in for more thread options
 Hi
I want to create one layout with 3 columns.

The left and right columns should have a auto-width.
The center column should have a fixed size of 300px.

By example:

If the browser window width is 500px I need the left column have
width=100px and right column have width=100px and center off course
width=300px.

If the browser window width is 300px then both left and right have
width=0px and the center keep with width=300px.

Obs.:
The left and right columns will be empty but having a different
background for each one.

If possible I prefer a tableless solution.



Posted by Ben C on March 26, 2008, 4:54 pm
Please log in for more thread options
> Hi
> I want to create one layout with 3 columns.
>
> The left and right columns should have a auto-width.
> The center column should have a fixed size of 300px.
>
> By example:
>
> If the browser window width is 500px I need the left column have
> width=100px and right column have width=100px and center off course
> width=300px.
>
> If the browser window width is 300px then both left and right have
> width=0px and the center keep with width=300px.
>
> Obs.:
> The left and right columns will be empty but having a different
> background for each one.
>
> If possible I prefer a tableless solution.

Float the left column left, float the right column right, leave the
middle column normal-flow and give it left and right margins of 100px.

Posted by dorayme on March 26, 2008, 6:24 pm
Please log in for more thread options
In article

> Hi
> I want to create one layout with 3 columns.
>
> The left and right columns should have a auto-width.
> The center column should have a fixed size of 300px.
>
> By example:
>
> If the browser window width is 500px I need the left column have
> width=100px and right column have width=100px and center off course
> width=300px.
>
> If the browser window width is 300px then both left and right have
> width=0px and the center keep with width=300px.
>
> Obs.:
> The left and right columns will be empty but having a different
> background for each one.
>
> If possible I prefer a tableless solution.

Not really possible under your conditions I am afraid. Care to lower the
bar a bit?

--
dorayme

Posted by Gus Richter on March 26, 2008, 11:33 pm
Please log in for more thread options
Neviton wrote:
> Hi
> I want ..............


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>3Col; center 300px constant</title>
<style type="text/css">
html, body, #left, #right, #center
#left
{ position: absolute;
width: 50%;
background: blue;}
#right
{ position: absolute;
right: 0;
width: 50%;
background: green;}
#center
{ position: absolute;
left: 50%;
margin-left: -150px;
background: white;
width: 300px;}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="center">
<p>Center's content goes here</p>
<p>Hi<br>
I want to create one layout with 3 columns.</p>

<p>The left and right columns should have a auto-width.<br>
The center column should have a fixed size of 300px.</p>

<p>By example:<p>

<p>If the browser window width is 500px I need the left column have
width=100px and right column have width=100px and center off course
width=300px.</p>

<p>If the browser window width is 300px then both left and right have
width=0px and the center keep with width=300px.<p>

<p>Obs.:<br>
The left and right columns will be empty but having a different
background for each one.</p>

<p>If possible I prefer a tableless solution.</p>
</div>
</body>
</html>


Posted by dorayme on March 27, 2008, 12:05 am
Please log in for more thread options

> Neviton wrote:
> > Hi
> > I want ..............
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/REC-html40/strict.dtd">
> <html>
> <head>
> <title>3Col; center 300px constant</title>
> <style type="text/css">
> html, body, #left, #right, #center
> #left
> { position: absolute;


Nice Gus, but see what happens on text enlargement.

--
dorayme

Similar ThreadsPosted
Any way to make an auto-sizing window? January 16, 2007, 1:55 am
Auto resizing February 4, 2005, 10:33 am
auto-table expanding June 25, 2006, 2:07 am
overflow:auto (or scoll) and height:100% September 23, 2006, 8:03 pm
Auto remove whitespace from HTML April 14, 2008, 2:23 am
Auto resizing web page according to screen resolution February 23, 2006, 12:56 am
How to make fieldset auto size to its inner content? June 28, 2007, 10:32 pm
overflow:auto issue in XHTML standards mode October 11, 2006, 10:25 am
Images & relative sizing & IE December 20, 2004, 1:09 pm
dynamic sizing text September 6, 2007, 3:14 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap