Topic: min width for page but use % for 3 columns? 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?" rel="nofollow" >Topic: min width for page but use % for 3 columns?\
 
Author Thread
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

 IP logged posted posted 04-20-2004 23:10 Edit Quote

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

 IP logged posted posted 04-21-2004 03:44 Edit Quote

Please post your code so we can see what you're talking about.
wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

 IP logged posted posted 04-21-2004 19:59 Edit Quote

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

 IP logged posted posted 05-05-2004 21:51 Edit Quote

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

 IP logged posted posted 05-06-2004 20:21 Edit Quote

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

 IP logged posted posted 05-06-2004 20:31 Edit Quote

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:
 
Your Text:
Loading...
Options:

« Backwards — Onwards »

Show Forum Drop Down Menu