Topic: min width for page but use % for 3 columns? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21466" title="Pages that link to Topic: min width for page but use % for 3 columns? (Page 1 of 1)" rel="nofollow" >Topic: min width for page but use % for 3 columns? <span class="small">(Page 1 of 1)</span>\$

wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 04-20-2004 23:10 Hello, I wanted to have a liquid three column page (that did not use tables for position) but still had a min page width so that when the browser is minimized beyond 750 px, instead of collapsing, horizontal scroll bar appears. right now I have all columns float: left; width: 33%;, but the right div moves down to the bottom left when the window is minimized past a certain point. I tried a min-width for the body, but really doesn't work in IE. That is not a suprise from what I have read. did that makes sense? Just in the starting stage so nothing to link to yet. all help is always welcome. thanks bill
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 04-21-2004 03:44 Please post your code so we can see what you're talking about.
wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 04-21-2004 19:59 well that certainly makes sense. css: body { width: 100%; margin: 10px 0 0 0; min-width: 750px; font: 10pt helvetica, arial, "sans serif"; background-color: #1D9CA7; color: #ffffff; scrollbar-face-color: #1D9CA7; scrollbar-highlight-color: #1D9CA7; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #1D9CA7; scrollbar-darkshadow-color: #ffffff; } #left { float:left; border-right: 3px dotted #ffffff; min-width: 225px; height: 100%; width: 33%; /* ie5win fudge begins / voice-family: "\\"}\\""; voice-family:inherit; width: 33%; } html>body #content { width: 33%; / ie5win fudge ends / } #mid { float:left; min-width: 300px; height: 100%; width: 33%; / ie5win fudge begins / voice-family: "\\"}\\""; voice-family:inherit; width: 33%; } html>body #content { width: 33%; / ie5win fudge ends / } #right { float:left; border-left: 3px dotted #ffffff; float: left; height: 100%; width: 33%; / ie5win fudge begins / voice-family: "\\"}\\""; voice-family:inherit; width: 33%; } html>body #content { width: 33%; / ie5win fudge ends */ } html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>FOCI Homepage</title> <link rel="stylesheet" type="text/css" href="efoci.css" title="default"> </head> <body> <div id="left"> <h1>EFOCI - Studying The Ecosystem</h1> <p> this is the left column where foci overview data and maps are along with educational packet stuff. Headers are also links to portal for that section, in this case the educational page. <img class=left src="images/goamap.gif" /> here will also be maps, one look info type images.</p> </div> <div id="mid"> <div align="center" id="head"> <img src="images/efocibig.gif"/> <a href="education.html"> LEARN </a><a href="work.html"> WORK </a><a href="references.html"> DATA </a><a href="contact.html"> PEOPLE </a><a href="links.html"> LINKS </a> </div> <h1>The Work And The Results</h1> <p>this is the middle column where foci nuts and bolts, portal to seminars and other stuff</p> </div> <div id="right"> <h1>FOCI Information and Operations</h1> <h2>Operations</h2> <ul> <li>Field Operations [<a href="seminarsched.html">at-sea info</a>]</li> <li>Forms and Templates [<a href="publications.html">look at them</a>]. </ul> <h2>Information</h2> <ul> <li>FOCI holds weekly lunchtime seminars at the Sandpoint facility [<a href="seminarsched.html">view the scehdule</a>]</li> <li>Over XXX publications have been generated from FOCI research [<a href="publications.html">see the citations</a>]. </ul> <h1>Data Resources</h1> <h2>Databases</h2> <ul> <li>Get CTD data from the EPIC database [<a href="seminarsched.html">visit</a>]</li> <li>Ichthyoplankton Cruise Catalog [<a href="fieldops.html">visit</a>].</li> </ul> </div> </body> </html> saw a bit where a person used an "invisible" HR, but had some other problems, plus seemed like a hack. will I need a table here? bill
austizmo Nervous Wreck (II) Inmate From: Texas Insane since: Apr 2004	posted 05-05-2004 21:51 What I would do is stick everything into a container div and set the min-width for that. You might also consider setting a max-width so those with massive screen resolutions don't end up with a paragraph of text stretched to form one line.
UnknownComic Paranoid (IV) Inmate From: 2 steps away from a los angeles curb Insane since: Nov 2003	posted 05-06-2004 20:21 errr, a little blurb from the peanut gallery here... is "#" the same as "." and is "id" the same as "class" ???
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 05-06-2004 20:31 No. See http://www.w3schools.com/css/css_syntax.asp quote: The class Selector With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: p.right {text-align: right} p.center {text-align: center} quote: The id Selector The id selector is different from the class selector! While a class selector may apply to SEVERAL elements on a page, an id selector always applies to only ONE element. An ID attribute must be unique within the document. The style rule below will match a p element that has the id value "para1": p#para1 {text-align: center; color: red} (Edited by Rinswind 2th on 05-06-2004 20:35)

Topic: min width for page but use % for 3 columns? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21466" title="Pages that link to Topic: min width for page but use % for 3 columns? (Page 1 of 1)" rel="nofollow" >Topic: min width for page but use % for 3 columns? <span class="small">(Page 1 of 1)</span>\$

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 04-20-2004 23:10

Hello,

I wanted to have a liquid three column page (that did not use tables for position) but still had a min page width so that when the browser is minimized beyond 750 px, instead of collapsing, horizontal scroll bar appears.

right now I have all columns float: left; width: 33%;, but the right div moves down to the bottom left when the window is minimized past a certain point.

I tried a min-width for the body, but really doesn't work in IE. That is not a suprise from what I have read.

did that makes sense?

Just in the starting stage so nothing to link to yet.

all help is always welcome.

thanks

bill

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 04-21-2004 03:44

Please post your code so we can see what you're talking about.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 04-21-2004 19:59

well that certainly makes sense.

css:

body {
width: 100%;
margin: 10px 0 0 0;
min-width: 750px;
font: 10pt helvetica, arial, "sans serif";
background-color: #1D9CA7;
color: #ffffff;
scrollbar-face-color: #1D9CA7;
scrollbar-highlight-color: #1D9CA7;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #1D9CA7;
scrollbar-darkshadow-color: #ffffff;
}
#left {
float:left;
border-right: 3px dotted #ffffff;
min-width: 225px;
height: 100%;
width: 33%; /* ie5win fudge begins */
voice-family: "\\"}\\"";
voice-family:inherit;
width: 33%;
}
html>body #content {
width: 33%; /* ie5win fudge ends */
}
#mid {
float:left;
min-width: 300px;
height: 100%;
width: 33%; /* ie5win fudge begins */
voice-family: "\\"}\\"";
voice-family:inherit;
width: 33%;
}
html>body #content {
width: 33%; /* ie5win fudge ends */
}
#right {
float:left;
border-left: 3px dotted #ffffff;
float: left;
height: 100%;
width: 33%; /* ie5win fudge begins */
voice-family: "\\"}\\"";
voice-family:inherit;
width: 33%;
}
html>body #content {
width: 33%; /* ie5win fudge ends */
}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>FOCI Homepage</title>
<link rel="stylesheet" type="text/css" href="efoci.css" title="default">
</head>

<body>
<div id="left">
<h1>EFOCI - Studying The Ecosystem</h1>
<p>
this is the left column where foci overview data and maps are along with educational packet stuff. Headers are also links to portal for that section, in this case the educational page. <img class=left src="images/goamap.gif" /> here will also be maps, one look info type images.</p>
</div>
<div id="mid">
<div align="center" id="head">
<img src="images/efocibig.gif"/>
<a href="education.html"> LEARN </a><a href="work.html"> WORK </a><a href="references.html"> DATA </a><a href="contact.html"> PEOPLE </a><a href="links.html"> LINKS </a>
</div>
<h1>The Work And The Results</h1>
<p>this is the middle column where foci nuts and bolts, portal to seminars and other stuff</p>
</div>
<div id="right">
<h1>FOCI Information and Operations</h1>
<h2>Operations</h2>
<ul>
<li>Field Operations [<a href="seminarsched.html">at-sea info</a>]</li>
<li>Forms and Templates [<a href="publications.html">look at them</a>].
</ul>
<h2>Information</h2>
<ul>
<li>FOCI holds weekly lunchtime seminars at the Sandpoint facility [<a href="seminarsched.html">view the scehdule</a>]</li>
<li>Over XXX publications have been generated from FOCI research [<a href="publications.html">see the citations</a>].
</ul>
<h1>Data Resources</h1>
<h2>Databases</h2>
<ul>
<li>Get CTD data from the EPIC database [<a href="seminarsched.html">visit</a>]</li>
<li>Ichthyoplankton Cruise Catalog [<a href="fieldops.html">visit</a>].</li>
</ul>
</div>
</body>
</html>

saw a bit where a person used an "invisible" HR, but had some other problems, plus seemed like a hack. will I need a table here?

bill

austizmo
Nervous Wreck (II) Inmate

From: Texas
Insane since: Apr 2004

posted 05-05-2004 21:51

What I would do is stick everything into a container div and set the min-width for that. You might also consider setting a max-width so those with massive screen resolutions don't end up with a paragraph of text stretched to form one line.

UnknownComic
Paranoid (IV) Inmate

From: 2 steps away from a los angeles curb
Insane since: Nov 2003

posted 05-06-2004 20:21

errr, a little blurb from the peanut gallery here...

is "#" the same as "."
and
is "id" the same as "class"

???

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 05-06-2004 20:31

No. See http://www.w3schools.com/css/css_syntax.asp

quote:
The class Selector

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

quote:
The id Selector

The id selector is different from the class selector! While a class selector may apply to SEVERAL elements on a page, an id selector always applies to only ONE element.

An ID attribute must be unique within the document.

The style rule below will match a p element that has the id value "para1":

p#para1
{text-align: center;
color: red}

(Edited by Rinswind 2th on 05-06-2004 20:35)

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:	Enable Slimies Enable Linkwords

Topic: min width for page but use % for 3 columns? (Page 1 of 1)

Insert Slimies »

Insert UBB Code »