SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Paul's 3 col layout

    I started with Paul's 3 col layout posted at the top of this forum but I've removed the footer and I tried to change the column width to percentages. Now, when I put text into the right column it shows up fine but depending on the content and width, either the padding creates horizontal scroll bars or in this example (code posted, can't host demo page ATM) at 1280x1024 (haven't tried on other res) there is a big gap between the right edge of the block of text and the edge of the window. It would easily fit one or two more words in the space but it won't

    Any ideas for a CSS novice?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {
    	height:100%
    }
    
    body {
    	padding:0;
    	margin:0;
    	background:pink url(leftcolbg.jpg) repeat-y left top;
    	color: #000000;
    }
    
    #outer{
    	height:100%;
    	min-height:100%;
    	margin-left:30%;
    	margin-right:15%;
    	background:#F8E7EC;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	margin-bottom:-52px;
    	color: #000000;
    }
     
    html > body #outer {
    	height: auto;
    }
    
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	background:#FF0000;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    }
    
    #left {
    	position:relative;/*ie needs this to show float */
    	width:30%;
    	float:left;
    	margin-left:-29%;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:72px;/*needed to make room for header*/
    	z-index:100;
    }
    
    #left p {
    	padding-left:3px;padding-right:2px
    }
    
    #right p {
    	padding-left:3px;padding-right:2px
    }
    
    #right {
    	position:relative;/*ie needs this to show float */
    	width:15%;
    	float:right;
    	margin-right:-16%;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:72px;/*needed to make room for header*/
    }
    
    #clearheader{height:72px;}/*needed to make room for header*/
    div,p	{margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    #centrecontent {position:relative;z-index:1}
    
    </style>
    </head>
    <body>
    <div id="outer"> 
    	<div id="left"> 
    		<p>Left content here</p>
    	</div>
    	<div id="right"> 
    		<p>This is a test, please don't **** me up.</p>
    	</div>
    	<div id="clearheader"></div>	<!-- to clear header -->
    
    	<div id="centrecontent"><!--centre content goes here -->
    		<p>Center content here</p>
    	</div>
    </div><!-- end outer div -->
    
    <div id="header">Header - No column longest - footer at bottom of window.</div>
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Cameron,

    I don't know if you noticed but there is a percentage layout in one of the demos.

    http://www.pmob.co.uk/temp/3colfluidtest_4.htm

    Although it works there are some issues with ie which are documented in the source.

    One thing to remember is that if you allow a 30% margin-left on the main container then your left float will have to be larger than 30% to fill the space.

    The reason is that the main container is not 100% wide because you have percentage margins on either side. So if you have 30% margin on one side and then 15% on the other then the main outer is reduced to 55% width. Now when you give your float a 30% width it will be 30% of 55% and will not fill the gap that you left for it. So in reality your 30% float needs to be 55% approc. (If your good at maths you can work it out properly but I just use trial and error.)

    Unfortunately IE can't find the width of elements that are defined by margins so it still uses the 30% ok which means that 2 values have to be supplied.

    Perhaps the easiest thing to do is look through my example above and just change it to suit your sizes.

    Hope that helps.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi cameron,

    I've just quickly taken the footer out and set the margins to 30% and 15% respectively.

    This should give you the idea and you can fine tune it. You will need to check ie5 but there is a hack built in from the other version that can be tweakes as rewuired.

    This looks the same in ie6,firebird and opera7 (more or less).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    html, body {height:100%}
    body {
    padding:0;
    margin:0;
    background: pink url(leftcolfluidbg.jpg) repeat-y left top;
    color: #000000;
    }
    #outer{
    height:100%;
    min-height:100%;
    margin-left:30%;
    margin-right:15%;
    background:#F8E7EC;
    border-left:1px solid #000;
    border-right:1px solid #000;
    color: #000000;
    }
    * html #outer {position:relative;} 
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#FF0000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #000000;
    }
    #left {
    position:relative;/*ie needs this to show float */
    width:55%;
    float:left;
    margin-left:-54.9%;/*must be 1px less than width otherwise won't push footer down */
    }
    #left p {padding-left:0x;padding-right:3px}
    #right p {padding-left:7px;padding-right:2px}
    #right {
    position:relative;/*ie needs this to show float */
    width:27%;
    float:right;
    margin-right:-26.9%;/*must be .1% less than width otherwise won't push footer down */
    }
    * html #left {margin-left:-54.9%;ma\rgin-left:-29.9%}/* for ie6 must be less than 30%!! - it still treats it as 30% even though its 55%*/
    * html #right {margin-right:-26.9%;ma\rgin-right:-26.9% }/* this column seems to work at this width - ie5 needs checking*/
    #footer {
    width:100%;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>
    </head>
    <body>
    <div id="outer"> 
    	<div id="clearheader"></div>
    <div id="left"> 
    	<p>Left Content goes here : Left Content goes here : Left Content goes here 
    	 : Left Content goes here : Left Content goes here : Left Content goes here 
    	 : Left Content goes here : Left Content goes here : Left Content goes here 
    	 : Left Content goes here : </p>
    </div>
    <div id="right"> 
    	<p>Right content goes here : Right content goes here : Right content goes 
    	 here : Right content goes here : Right content goes here : Right content 
    	 goes here : Right content goes here : Right content goes here : Right content 
    	 goes here : </p>
    </div>
    <!-- to clear header -->
    <div id="centrecontent"> 
    	<!--centre content goes here -->
    	<p><strong>3 column Fluid layout</strong> - any column can be the longest 
    	 and all are fluid. Footer will stay at bottom of window unless content is 
    	 greater then it stays at bottom of document.</p>
    	 <p><strong>3 column Fluid layout</strong> - any column can be the longest 
    	 and all are fluid. Footer will stay at bottom of window unless content is 
    	 greater then it stays at bottom of document.</p>
     
    </div>
    </div>
    <!-- end outer div -->
     
    <div id="header">Fluid 3 columns - No column longest - footer at bottom of window.<br />
    <p>Back to main 3 column demo <a href="3colfixedtest_4.htm">Main Demo</a></p>
    </div>
    </body>
    </html>
    The percentage version isn't quite so easy to manipulate as the fixed width version but depending on the type of layout can be effective.

    Hope this helps.

    Paul


Bookmarks

Posting Permissions

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