SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column equalising layout

    (I know this has been posted recent but I can't find it)
    I am doing a 2 column layout with a right hand nav in the narrow right column.
    The way I have done this before is to put in a background image in a big container div. But on this site there is a background graphic at the bottom of the navigation column, so that method doesn't work.

    Thanks for any help (including a link to that other thread).

    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>
    <style type="text/css">
    		body{
    		margin: 5px;
    		background-color: #A1B482;
    		}
    		#container {
    			width: 754px;
    			\width: 774px;
    			w\idth: 754px;
    			border: 0
    			margin: 0;
    			margin-left: auto;
    			margin-right: auto;
    		}
    
    		#banner {
    			background-image: url(images/testhead.gif);
    			background-repeat: no-repeat;
    			background-position: bottom;
    			height: 7px;
    		}
    
    		#innercont{
    	background-color: #D8D8EC;
    	border-left: 1px solid #58763A;
    	border-right: 1px solid #58763A;
    	background-image: url(images/testimg.gif);
    	background-position: bottom right;
    	background-repeat: no-repeat;
    			
    		}
    		#content {
    			padding: 5px;
    			margin-right: 186px;
    			background-color: #EAEAEA;
    			border-right: 1px solid #B2B2B2;
    		}
    
    		#sidebar-a {
    			float: right;
    			width: 174px;
    			\width: 186px;
    			w\idth: 174px;
    			padding: 5px;
    			border-left: 1px solid #E4E4F2;
    		}
    
    		#footer {
    			clear: both;
    			background-image: url(images/testfoot.gif);
    			background-position: top;
    			background-repeat: no-repeat;
    			height: 25px;
    		}
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="banner">&nbsp;</div>
    
    <div id="innercont">		
    		
    		<div id="sidebar-a">&nbsp;</div>
    
    <div id="content">Lorem ipsum dolor sit et amet, vupute minim consectetuer in erat de adipiscing elit, sed de diam nonummy nibheuismod et tincidunt utat laoreet dolore magna aliquam erat volutpat.
    
    Ut wisi enim ad minim wesm, quis nostrud execi taton ullamcorper suscipit lobortis nisl ut aliquip ex.
    
    Duis autem vel eum irure en dolor in hendrerit vupute vel velit esse molestie conseqat sequat, vel illum dolore ven eu feugiat nulla facilisis at vero eros et accumsan naet iusto odio dignissim qui vel blandit praesent luptatum zzril delenit augue duis do te feugait nulla facilisi. Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod.
    
    </div>
    
    </div>
    		<div id="footer">&nbsp;</div>
    	</div>
    </body>
    </html>
    p.s. the images in the header and footer finish off the column design.
    link to page

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

    Here is a 2 column equalising layout that doesn't use background images.

    http://www.pmob.co.uk/temp/2column_simple_1.htm

    So you should be able to utilise it and place a background image without affecting the column effect.

    If this is the effect you are looking for I can show you how to convert it to your layout although it's really quite straightforward .

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's done it, thanks a bunch.
    'live' version has been updated.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's done it, thanks a bunch.
    'live' version has been updated.

    Err apparently it's not sorted in Moz, having a look now.

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

    You went one pixel the wrong way on the float plus some margins needed to be tidied up.
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    body {
     margin:5px;
     background-color: #A1B482;
     color:#000;
     text-align:center;/*centre for ie5 */
    }
    #container {
     width:754px;
     background: #EAEAEA url(http://www.designed4hits.com/temp/he...tdgreendot.gif) repeat-y left;/*this colour will be left column colour */
     margin:auto;/* centre for compliant browsers*/
     text-align:left;
    }
    #header {
     overflow:hidden;
     height:7px;
     text-align:center;
     background: #A1B482 url(http://www.designed4hits.com/temp/he...s/testhead.gif) no-repeat left top;
    }
    #left {
     margin-left:-565px;/*must be 1 pixel less than width */
     float:left;
     width:566px;/* this width is the same as the margin on #middle */
     position:relative;
    }
    #left p {padding-left:5px}
    #middle {
     border-left:1px solid #B2B2B2;
     border-right: 1px solid #58763A;
     background: #D8D8EC url(http://www.designed4hits.com/temp/he...es/testimg.gif) no-repeat left bottom;/* background colour of right column */
     margin-left:566px;/*this is the space for the left column */
    }
    #middle p {padding-left:5px}
    * html #middle {height:1%}/* combat ie's 3 pixel jog */
    #footer {
     clear:both;
     height: 10px;
     text-align:center;
     background: #A1B482  url(http://www.designed4hits.com/temp/he...s/testfoot.gif) no-repeat top center;
     padding-top: 10px;
     }
    h1,h3,p,ul {margin-top:0}
    ul {margin-bottom:0;}
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"></div>
      <div id="middle"> 
    	<div id="left"> 
    	  <p>Lorem ipsum dolor sit et amet, vupute minim consectetuer in erat de adipiscing 
    		elit, sed de diam nonummy nibheuismod et tincidunt utat laoreet dolore 
    		magna aliquam erat volutpat. Ut wisi enim ad minim wesm, quis nostrud 
    		execi taton ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    	  <p>Lorem ipsum dolor sit et amet, vupute minim consectetuer in erat de adipiscing 
    		elit, sed de diam nonummy nibheuismod et tincidunt utat laoreet dolore 
    		magna aliquam erat volutpat. Ut wisi enim ad minim wesm, quis nostrud 
    		execi taton ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    	  <p>Lorem ipsum dolor sit et amet, vupute minim consectetuer in erat de adipiscing 
    		elit, sed de diam nonummy nibheuismod et tincidunt utat laoreet dolore 
    		magna aliquam erat volutpat. Ut wisi enim ad minim wesm, quis nostrud 
    		execi taton ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    	</div>
    	<ul>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	  <li>nav item</li>
    	</ul>
    	<br style="clear:both" />
      </div>
      <div id="footer"> Footer | <a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back 
    	to Main Demo</a> | Footer </div>
    </div>
    </body>
    </html>
    Mozilla is ok now

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will compair the 2 so I can see where I went wrong.
    Thanks a lot.
    (even if I don't use the design for this site, I can see me using it in the future.)


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
  •