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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid center column

    Hi, I am new here and i need some help with 3 col div layout.

    I found this free template called reflections and edited it to he way I like.the only problem i have is,when the content is longer then the left or right column it get spred around.how do I make it so only the center part gets longer in the lines.I hope you get what I mean.

    here it is in action Glitternation

    here is my css coding.

    Code:
    /* Main Styles that apply to body */
    body {
    	font-size: 11px;
    	font-family: Verdana;
    	margin: 0px;
    	padding-left: 50%;
    	background: #fff url(images/bg.gif) center repeat-y;
    	
    }
    
    /* This is the page container built and centered using -ve margins */
    #container {
    	width: 800px;
    	margin-left: -389px;
    }
    
    /* The topmost faded bar */
    #topbar {
        width:auto;
        background: #EEE;
        height: 20px;
        padding: 10px 5px 5px 2px;
        font: 9px verdana;
        font-weight: bold;
        color: #CCCCCC;
        text-align: right;
    }
    
    /* This holds the two heading blocks, the title and the login form */
    #headerwrapper {
        width: auto;
    }
    
    /* class that styles the holder div of the forms */
    .userform {
        width: auto;
        color: #DD7CB4;
        padding: 5px 0px 5px 3px;
        background: #fbfbfb;
        border:1px solid #efefef;
        border-top: none;
        text-align: justify;
        margin-bottom: 1px;
    }
    
    /* This will style the login and search */
    .userform input {
        border: 1px solid #DDD;
        font-family: verdana;
        font-size: 10px;
        color: #BBB;
        font-weight: bold;
    }
    
    h1 {
        font: 48px verdana;
    	color: #EEE;
    	margin: 5px;
    }
    
    h6 {
        font: 10px verdana;
        font-weight: bold;
    	color: #DDD;
    	margin: 0px;
    	padding: 0px;
    	margin-left: 8px;
    }
    
    /* This holds the tabs */
    #tabholder
    {
        width: auto;
    }
    
    /* Container for the article box, and the pic box */
    .articleboxouter {
        width: auto;
        padding: 0px 5px 0px 5px;
        clear: both;
    } 
    
    /* Content holder for the articles */
    .articleboxinner {
        width: auto;
        line-height: 20px;
        color: #DD7CB4;
        padding: 0px 6px 0px 6px;
        background: #fbfbfb;
        border:1px solid #efefef;
        text-align: justify;
        height: auto;
    }
    
    /* The title style for the main article */
    .articleheader
    {
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid #CCC;
    }
    
    /* This will style the read more thing at the bottom */
    .readmore {
        text-align: right;
        display: block;
        width: auto;
    }
    
    
    
    
    
    
    
    
    /* Sometimes, I don't want borders around my hyperlink images */
    .noborder {
        border: none;
    }
    
    /* For taming those leeeeeeetle arrows */
    img {
        vertical-align: text-bottom;
    }
    
    /* Style-up those ugly default hyperlinks */
    a {
    	text-decoration: none;
    	padding: 0;
    	margin: 0;
    	color: #303030;
    }
    
    /* And their ugly hover states too */
    a:hover {
    	
     color:#BEBEBE;
    
    }
    
    /* Why should the humble footer be left out? */
    #footer {
    	background-color: #CCC;
    	color: #fff;
    	text-align: center;
    	vertical-align: middle;
    	height: 20px;
    	padding-top: 5px;
    	clear: both;
    }
    
    /* This will contain the three columns */
    #newsContainer2
    {
        width:auto;
        background-color: #E0E0E0;
    }
    
    /* First column of the three columns */
    
    .c1
    {
    	width: 143px;
    	background-color: #fff;
        border: 1px solid #DDD;
        border-top: none;
        line-height: 15px;
    font-size: 10px;
    	font-family: Verdana;
        color: #DD7CB4;
    	float: left;
    
    }
    /* Second column of the three columns */
    .c2
    {
        width: 499px;
        float: left;
        border-bottom: 1px solid #DDD;
        line-height: 22px;
        color: #6699ff;
    position:relative;
    
    
    }
    
    /* Third column of the three columns */
    .c3
    {
    	width: 143px;
    	background-color: #fff;
        border: 1px solid #DDD;
        border-top: none;
        line-height: 15px;
        color: #DD7CB4;
    font-size: 10px;
    	font-family: Verdana;
    	float: right;
    
    }
    
    /* This controls the titles for each column */
    .noteheader
    {
        width:auto;
        border-bottom: 1px solid #DDD;
        border-top: none;
        color: #DD7CB4;
        height: 24px;
        font-family: verdana;
        font-size: 11px;
        font-weight: bold;
    	background:url(images/bar2.gif) repeat-x;
    }
    
    .noteheader2
    {
        width:auto;
        border-bottom: 1px solid #DDD;
        border-top: none;
        color: #DD7CB4;
        height: 24px;
        font-family: verdana;
        font-size: 11px;
        font-weight: bold;
    	background:url(images/bar.gif) repeat-x;
    }
    /* And this gives the column text some breathing space */
    .spacy
    {
        padding: 5px;
    }
    
    .spacy2
    {
     
        padding: 30px;
    }
    
    /* CSS Tabs */
    #tabs8 {
        float:left;
        width:100%;
        background:#FFF;
        font-size:93%;
        line-height:normal;
        border-bottom:1px solid #CCC;
    }
    
    #tabs8 ul {
        margin:0;
        padding:10px 10px 0 5px;
        list-style:none;
    }
    
    #tabs8 li {
        display:inline;
        margin:0;
        padding:0;
    }
    
    #tabs8 a {
        float:left;
        background:url("images/tableft8.gif") no-repeat left top;
        margin:0;
        padding:0 0 0 4px;
        text-decoration:none;
    }
    
    #tabs8 a span {
        float:left;
        display:block;
        background:url("images/tabright8.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
        color:#fff;
        font-weight: bold;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs8 a span {float:none;}
        /* End IE5-Mac hack */
        #tabs8 a:hover span {
        color:#591333;
    }
    
    #tabs8 a:hover {
        background-position:0% -42px;
    }
    
    #tabs8 a:hover span {
        background-position:100% -42px;
        color: #888;
    }
    
    #tabs8 #current a {
        background-position:0% -42px;
    }
    #tabs8 #current a span {
        background-position:100% -42px;
        color: #888;
    }
    
    
    #nav{
         width:143px;
    height:20px;
    float: right;
    
    
    }
    
    ul.list_one {
      list-style-type:none; /* remove the bullets */
      margin:0; /* remove the automatic margin that some 
                   browsers use for the text-indent. */
      padding:0px; /* remove the automatic padding that other
                   browsers use for the text-indent. */
      width:499px; /* fix the width of the list items which
                   would default to 100% */
    float:left;
     line-height:15px;
    
    }
    ul.list_one a, ul.list_one a:visited, ul.list_one a:active {
      text-decoration:none; /* remove the default underline from
                               the links */
      display:block; /* make each link into a block so that
                        hovering over any area of the link 
                        will cause a change of background color */
       text-indent:5px; /* move the link text 5px to the right */
        border-bottom:1px dashed #aeadad; /* separate the links with a 1px 
                                       wide white line */
    padding-bottom:1px;
    
    }
    ul.list_one a:hover {
      background:#ddd; /* change the background to blue on :hover */
      border-bottom:1px dashed #aeadad; /* separate the links with a 1px 
                                       wide white line */
    padding-bottom:1px;
    }
    
    .button{
    
    color : #ffffff;
    border:#303030 1px dashed;
    text-align :  center;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: bold;
    background:#bbbbbb;}
    
    
    input , textarea {
    color : #ffffff; 
    background :#d0d0d0; 
    font: 11px  Verdana, sans-serif;
    color: #ffffff;
    font-weight : normal; 
    text-decoration : none; 
    text-align : left; 
    border-width : 1px; 
    border-style : dashed; 
    border-color : #303030 ;}
    
    .bar{
    font: 11px  Verdana, sans-serif;
    color : #6699ff;
    text-align :left;
    padding-right: 5px;
    font-weight: bold;
    line-height: 14pt;
    }
    
    .bar2{
    font: 11px  Verdana, sans-serif;
    color : #fff;
    text-align :center;
    padding-right: 5px;
    font-weight: bold;
    line-height: 14pt;
    background:#ddd; 
    border-bottom:1px dashed #aeadad;
    }
    
    Scrollbar colors! ...................... */
    <!--body {
    scrollbar-3dlight-color: #e8e8e8;
    scrollbar-highlight-color: #e8e8e8; 
    scrollbar-arrow-color: #d0d0d0;
    scrollbar-base-color: #d0d0d0;
    scrollbar-darkshadow-color: #afaeae;
    scrollbar-face-color: #d0d0d0;
    scrollbar-shadow-color: #afaeae;
    scrollbar-track-color: #d0d0d0;  
    
    } -->
    /* End of CSS Tabs */
    Thanks you,
    priya
    Last edited by rmedek; 10-10-2007 at 12:20 AM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    At first glance, I don't see a problem. What browser are you using?

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    if you need equal height colums, there are many ways to fix it, i personally wrote my own

    http://blog.creonfx.com/examples/jav...v-columns.html

    http://blog.creonfx.com/javascript/e...mns-div-layout

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Try adding some margins to the side of the centre column.
    Because of the floats, the centre will flow past the column lines unless there is a margin the same width of the side columns.
    Code:
    margin-left: 150px;
    margin-right: 150px;
    Or something like that. Worth a try.
    Last edited by jlhaslip; 10-10-2007 at 09:10 AM.


  •  

    Posting Permissions

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