SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    India
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 2 Column Layout Issue.

    Hi,

    I am new to CSS based layouts. I am making a 2 column layout. My left panel is gray colored and main body color is white. Now if left panel's content is less as compared to main body, then at the bottom it shows the color of the background (blue). Its not continuous. I hope you understand what i mean.

    So left panel has 2 colors - gray (on top) and blue (at bottom).

    Now the same thing happens with main body if the content inside it is less as compared to content of left panel. Its partly white and partly blue.


    Please suggest how should i fix this.

    Regards,

    Viv

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    India
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    Thanks for this. Background image concept is cool. BTW is it your article?

    Cheers,

    Viv

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    About the Author

    Dan Cederholm Designer, coder, and bon vivant Dan Cederholm drove the standards-compliant redesigns of Fast Company and Inc.com (interview). He publishes design tips and news on his personal site, SimpleBits.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    India
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark,

    Thanks for the information.

    But I am still having a very hard time coding css based table-less designs becuase the results vary from browser to browser.

    The code below works well in Firefox but when I view this in IE6, it is not the same. Problem is: In the right column (#right), the upper part of content ( i.e. content with width equal to the width of left side content) gets slided to the right by a pixel or two.


    Code:
    <HTML>
    <HEAD>
    <STYLE>
    body
    {
    margin:0;
    padding:0;
    background-color:#a0a0a0;
    }
    
    #cont
    {
    	margin:0;
    	padding:0;
    	width:750px;
    	background: url(images/bodybg.gif) repeat-y;
    	
    }
    
    #left
    {
    	width:200px;
    	margin:0;
    	padding:0;
    	float:left;
    	
    }
    
    #right
    {
    	margin:0 0 0 200px;
    	padding:0;
    	
    }
    
    
    .clear {
    	clear: both;
    	margin: 0;
    	padding: 0;
    }	
    
    </STYLE>
    </HEAD>
    		
    <body>
    
    
    <DIV ID="cont">
    
    
    	<div id="left">Sed mollis aliquam ante. Proin massa. Etiam scelerisque quam vel tortor. Aenean quis justo. Duis nec quam. Pellentesque porttitor lorem vitae orci. </DIV>
    	<DIV id="right">Curabitur non justo at dui lobortis ultricies. Fusce odio tellus, vulputate eu, mattis ac, tincidunt ut, purus. Fusce eget lacus. Donec nibh odio, ullamcorper ut, venenatis molestie, placerat a, sapien. Donec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Aliquam facilisis, pede ac placerat ultricies, dolor lectus tempus elit, eget fringilla magna elit et pede. Etiam eu sem. Vivamus lobortis, urna nec condimentum rutrum, est lorem euismod risus, id lobortis dui magna nec nisi. Donec laoreet, enim sit amet volutpat faucibus, sapien leo gravida nunc, et ultrices nibh magna sed eros. Quisque sem nisi, euismod ac, elementum eget, auctor id, magna. Nunc lectus. Vivamus viverra neque non leo. Sed scelerisque lectus eget arcu hendrerit blandit. Sed purus velit, hendrerit nec, tristique ut, ullamcorper id, nunc. Vestibulum pretium, nisl eu tempus facilisis, justo metus rutrum ipsum, nec sagittis eros risus nec ante. 
    
    Mauris tempor nisi sit amet diam pretium fringilla. In lorem. Mauris pharetra quam quis neque. Sed mollis aliquam ante. Proin massa. Etiam scelerisque quam vel tortor. Aenean quis justo. Duis nec quam. Pellentesque porttitor lorem vitae orci. Aliquam lobortis ultricies nibh. Morbi porta nulla. Integer est diam, commodo vitae, pellentesque et, tincidunt in, risus. Suspendisse tempor risus vel massa. Proin condimentum scelerisque sem. Aliquam nec nisi nec urna tempor sodales. Etiam malesuada suscipit metus.</DIV>
    	<div class="clear"></div>
    
    </DIV>

    Not sure how to fix this. Please suggest.

    Thanks Viv.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    India
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it worked. Thanks for the help.


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
  •