Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Making 3 column css fixed past a certain point??

    Hi All,

    The css template in the attached link is currently fluid but i don't think it looks good when you minimise it so much that all the text and any images stored within move out of place.

    Can you tell me 1) If it is easily possible to make it fluid only until a certain point 2) How I would do this?

    The changes would need to be across all browsers if possible.

    http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

    CSS code also include below.

    Many Thanks.

    G.



    Code:
    @charset "iso-8859-1";
    
    /*******************************************************************************
    *  skidoo_too.css : 2005.08.29
    * -----------------------------------------------------------------------------
    *  A remake of the skidoo layout with the middle column appearing first in
    *  source ordering.
    *******************************************************************************/
    
    /* begin with generic selectors so that they can be overridden if needed
     * by classes deeper in the stylesheet
     */
    .clear
    {
    	clear: both;
    	padding-bottom: 1px;	/* for Gecko-based browsers */
    	margin-bottom: -1px;	/* for Gecko-based browsers */
    }
    .hide
    {
    	display: none !important;
    }
    .inside
    {
    	/* glitch in IE caused by vertical padding in this class, so 0 padding is
    	 * set here and those blocks that need the vertical padding must be 
    	 * applied to the parent element. the purpose of this class is to provide
    	 * horizontal padding without using hacks to get around IE's broken box 
    	 * model. so it's okay to apply vertical padding to the parent element, 
    	 * just not horizontal padding.
    	 */
    	padding: 0 1em;
    }
    
    /* margin values and font sizes for headings, and margins on paragraphs
     * and lists are not consistent across browser platforms. to achieve a
     * consistent look we need to explicity set these values here. it may
     * seem an odd way to declare the margins like this but you never
     * know what kind of horizontal padding a browser may be using on an
     * element, and I only want to change the vertical padding.
     *
     * pixels are used here, rather than ems, because I want a consistent
     * margin on the different headings. if I use ems, 1em for an h1 element
     * is much larger than 1em on an h6 element. I don't wnat this.
     *
     * salt to taste
     */
    ul, ol, dl, p, h1, h2, h3, h4, h5, h6
    {
    	margin-top: 14px;
    	margin-bottom: 14px;
    	padding-top: 0;
    	padding-bottom: 0;
    }
    h1
    {
    	font-size: 220%;
    }
    h2
    {
    	font-size: 190%;
    }
    h3
    {
    	font-size: 160%;
    }
    h4
    {
    	font-size: 130%;
    }
    h5
    {
    	font-size: 100%;
    }
    h6
    {
    	font-size: 70%;
    }
    
    /* alter some HTML elements' default style
     */
    a, a:link, a:visited, a:active
    {
    	text-decoration: underline;
    }
    a:hover
    {
    	text-decoration: none;
    }
    code
    {
    	font-family: "Courier New", Courier, monospace;
    }
    label
    {
    	cursor: pointer;
    }
    table
    {
    	font-size: 100%;
    }
    td, th
    {
    	vertical-align: top;
    }
    
    /* now we craft the core layout of the page. this includes positioning and
     * gutter space. colors and fonts should not come into play at this point.
     * when defining a border, default its color to white which is probably
     * the safest thing to do.
     */
    body
    {
    	margin: 25px 4%;	/* margin instead of padding for the gutterspace around 
    	 			   the layout because IE breaks the layout when 
    	 			   horizontal padding is applied to the body element.
    	 			   % over pixels for that horizontal gutterspace so that
    	 			   it automatically goes below 20px on low-res browsers
    	 			   to create more space for the content. */
    	font-size: 100.1%;	/* resolve some font size issues in some layouts for
    				   some browsers. (in other words, i got no clue.) */
    }
    #pageWrapper
    {
    	border: solid 1px #fff;
    	border-width: 0 1px;
    	min-width: 40em;	/* IE doens't understand this property. EMs are used
    				   so that as the font size increases, the proportional
    				   limitations (min-width) increase with it, rather
    				   than creating a middle column that can only fit
    				   3 or 4 characters in it. */
    	width: auto;
    }
    * html #pageWrapper
    {
    	/* \*/
    		word-wrap: break-word;
    	/* invalid CSS but keeps IE from breaking horribly under narrow viewports */
    }
    #masthead
    {
    	border: solid 1px #fff;
    	border-width: 1px 0;
    	padding: 0.5em;
    }
    #masthead h1
    {
    	padding: 0;
    	margin: 0;
    }
    #outerColumnContainer
    {
    	/* reserves space for the left and right columns. you can use either
    	 * padding, margins, or borders, depending on your needs. however you
    	 * can use the border method to create a background color for both left
    	 * and right columns
    	 */
    	border-left: solid 14em #fff;
    	border-right: solid 14em #fff;
    }
    #innerColumnContainer
    {
    	border: solid 1px #fff;
    	border-width: 0 1px;
    	margin: 0 -1px;		/* compensate for the borders because of
    				   100% width declaration */
    	width: 100%;
    	z-index: 1;
    }
    #leftColumn, #middleColumn, #rightColumn, * html #SOWrap
    {
    	overflow: visible;	/* fix for IE italics bug */
    	position: relative;	/* fix some rendering issues */
    }
    #SOWrap
    {
    	float: left;
    	margin: 0 -1px 0 0;
    	width: 100%;
    	z-index: 3;
    }
    #middleColumn
    {
    	float: right;
    	margin: 0 0 0 -1px;
    	width: 100%;
    	z-index: 5;
    }
    #leftColumn
    {
    	float: left;
    	margin: 0 1px 0 -14em;
    	width: 14em;
    	z-index: 4;
    }
    #rightColumn
    {
    	float: right;
    	width: 14em;
    	margin: 0 -14em 0 1px;
    	z-index: 2;
    }
    #footer
    {
    	border: solid 1px #fff;
    	border-width: 1px 0;
    	padding: 0.5em;
    }
    
    p.fontsize-set
    {
    	text-align: center;
    }
    p.fontsize-set img
    {
    	border-width: 0;
    }
    
    /* vertical navigation stuff. mostly exactly as seen in the vnav.css styleheet
     * in the original skidoo layout.
     */
    .vnav
    {
    	margin: 1em 0;
    }
    .vnav ul, .vnav ul li
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: block;
    }
    .vnav ul
    {
    	border: solid 1px #fff;
    	border-bottom-width: 0;
    }
    .vnav ul li
    {
    	border-bottom: solid 1px #fff;
    }
    .vnav ul li, .vnav ul li a
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	line-height: normal;
    }
    .vnav ul li a
    {
    	display: block;
    	padding: 2px 5px 3px 5px;
    }
    .vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover
    {
    	text-decoration: none;
    	cursor: pointer;
    }
    .vnav h3
    {
    	margin-bottom: 0;
    	padding-bottom: 0;
    	font-size: 126%;
    }
    * html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */
    {
    	height: 0.01%;
    }
    * html .vnav ul
    {
    	position: relative;	/* IE needs this to fix a rendering problem */
    }
    
    /* horizontal navigation elements. create a DIV element with the class hnav
     * and stick one unordered list inside it to generate a horizontal menu.
     */
    .hnav
    {
    	border-bottom: solid 1px #fff;
    	text-align: center;
    }
    .hnav, .hnav ul li a
    {
    	/* need to middor veritcal padding on .hnav and child anchor elements
    	 * because the anchors are _not_ block elements. since they are not
    	 * block elements web browsers will not expand .hnav to contain them
    	 * even with the extra padding. by applying the same padding to both
    	 * the parent .hnav _looks_ like its containing the child anchor
    	 * elements. 
    	 */
    	padding-top: 3px;
    	padding-bottom: 4px;
    }
    .hnav ul, .hnav ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    .hnav ul li a
    {
    	margin: 0 -1px 0 0;
    	padding-left: 10px;
    	padding-right: 10px;	/* short-hand padding attribute would overwrite
    				   top/bottom padding set in a previous rule */
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    	white-space: nowrap;
    }
    .hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
    {
    	text-decoration: none;
    }
    .hnav ul li span.divider
    {
    	display: none;
    }
    * html .hnav ul li, * html .hnav ul li a
    {
    	width: 1%; /* IE/Mac needs this */
    	display: inline-block;	/* IE/Mac needs this */
    	/* \*/
    		width: auto;
    		display: inline;
    	/* reset above hack */
    }
    * html .hnav, * html .hnav ul a
    {
    	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
    				 IE/Mac will ignore this rule. */
    }
    * html .HNAV
    {
    	padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its
    			   inline children that have vertical padding. So this
    			   incorrect case selector hack will be applied only by
    			   IE 5.x/Win */
    }
    
    /* everything below this point is related to the page's "theme" and could be
     * placed in a separate stylesheet to allow for multiple color/font scemes on
     * the layout. you should probably leave a default theme within this stylesheet
     * just to be on the safe side.	
     */
    #pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a
    {
    	border-color: #565;
    }
    html, body
    {
    	/* note that both html and body elements are in the selector.
    	 * this is because we have margins applied to the body element
    	 * and the HTML's background property will show through if
    	 * it is ever set. _DO_NOT_ apply a font-size value to the
    	 * html or body elements, set it in #pageWrapper.
    	 */
    	background-color: #eee;
    	color: #000;
    	font-family: arial, helvetica, sans-serif;
    }
    #pageWrapper
    {
    	font-size: 80%;	/* set your default font size here. */
    }
    #masthead
    {
    	background-color: #898;
    	color: #fff;
    }
    .hnav
    {
    	background-color: #aba;
    	color: #fff;
    }
    #outerColumnContainer
    {
    	border-left-color: #ded;	/* left column background color */
    	border-right-color: #cdc;	/* right column background color */
    	background-color: #fff;		/* set the background color for the
    					   middle column here */
    }
    .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active
    {
    	text-decoration: none;
    	background-color: #cdc;
    	color: #000;
    }
    #rightColumn .vnav ul li a:link, #rightColumn .vnav ul li a:visited, #rightColumn .vnav ul li a:active
    {
    	background-color: #ded;
    }
    .vnav ul li a:hover, #rightColumn .vnav ul li a:hover
    {
    	text-decoration: none;
    	background-color: #898;
    	color: #fff;
    }
    .hnav ul li a:link, .hnav ul li a:visited
    {
    	background-color: #bcb;
    	color: #000;
    }
    .hnav ul li a:hover
    {
    	background-color: #787;
    	color: #fff;
    }
    #rightColumn .inside
    {
    	/* if you apply a font size to just #rightColumn, then its width,
    	 * which is specified in EMs, will also be affected. you don't want
    	 * that. so apply font size changes to the .inside element which exists
    	 * inside underneath all three columns
    	 */
    	font-size: 90%;
    }
    #rightColumn .inside .vnav
    {
    	font-size: 110%;
    }
    #footer
    {
    	background-color: #898;
    	color: #fff;
    	text-align: center;
    }
    
    /******************************************************************************/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a look at the source of http://bonrouge.com/2c-hf-fullyfluid.php, there you may see
    Code:
    body {
    min-width:600px; 	/*  this is for Firefox  */
    }
    Code:
    <!-- These here are IE conditional comments. They control the minimum width and height -->
    <!--[if gte IE 5]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );
    }
    #rightbg {
    height:expression(document.body.offsetHeight + "px");
    }
    </style>
    <![endif]-->
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have a look at the source of http://bonrouge.com/2c-hf-fullyfluid.php, there you may see
    Code:
    body {
    min-width:600px; 	/*  this is for Firefox  */
    }
    Code:
    <!-- These here are IE conditional comments. They control the minimum width and height -->
    <!--[if gte IE 5]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );
    }
    #rightbg {
    height:expression(document.body.offsetHeight + "px");
    }
    </style>
    <![endif]-->
    Thanks, but the body part of the css already seems to have a min width hence my confusion.

  • #4
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gh05 View Post
    Thanks, but the body part of the css already seems to have a min width hence my confusion.
    Sorry i meant the 'page wrapper' part, not the body. I've managed to change this min width so that it works in firefox but am unsure where to insert the IE bit.

    Also I wanted to add a max-width too so that articles which i write are not completely stretched out on wide screens but when I've done this the page is no longer centered. Is this an easy fix? No idea how to do it in IE either.

    Many Thanks!
    Last edited by gh05; 05-19-2009 at 08:28 PM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Sorry i meant the 'page wrapper' part, not the body. I've managed to change this min width so that it works in firefox but am unsure where to insert the IE bit.
    Have you checked the html source(from browsers view source option) of that sample layout?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have you checked the html source(from browsers view source option) of that sample layout?

    Thanks. Didn't realise the javascript for min width was in there.

    I'm still struggling with providing a max width though. I don't want articles in the middle column being stretched on wider screens so is there any way to set a max width while also keeping it fairly fluid and while also keeping it centered.

    If i put max-width in then it just seems to go off center and doesn't do anything in IE.

    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •