SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Flexible Height of Column

    Hi Paul

    I guess you have already a ready-made solution for my problem, but still I would like to explain it here:

    I have two columns in my website which have rounded corners and I have been able to design them in HTML using top and bottom images with round corners.

    Now when I am filling them with text, I want them to be remain of same height irrespective of content. As of now the column having much content is getting more height.

    If this is clear, could you please guide me further to get the results?

    Regards

    Swaraj

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    If you want the columns to stay a fixed height, your content would need to scroll within the columns, and you could use overflow: auto for that.

    But on second reading, I assume you just want both columns to grow taller together? Well, assuming your site is a fixed-width design, you could have both columns in a wrapper that had a single top and bottom image for both columns combined. Then, if one column got bigger, the other would be forced to follow (in appearance, anyway. So, the wrapper has a top and bottom image to represent the rounded tops, and then a repeating background image to represent the two columns, a la the faux columns technique.

    Or you could do a quick check of Paul's site.

  3. #3
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    I am trying follow this codes in this link http://www.pmob.co.uk/temp/3col-fluid-round.htm.

    But if I am saving the code locally I do not see round corners, not able to understand why.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by swaraj_here View Post
    I am trying follow this codes in this link http://www.pmob.co.uk/temp/3col-fluid-round.htm.

    But if I am saving the code locally I do not see round corners, not able to understand why.
    That's strange - if you're using the same browser, I don't understand why border-radius would work over http: but not over localhost. Do you want to post your code, it may be that you have a typo in there that you've not spotted.

  5. #5
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Stevie D View Post
    That's strange - if you're using the same browser, I don't understand why border-radius would work over http: but not over localhost. Do you want to post your code, it may be that you have a typo in there that you've not spotted.
    Here you go:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Equal Columns</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0
    }
    p {
    margin:0 0 1em 0;
    padding:5px;
    position:relative;
    }/*opera 8 needs the position:relative on the inner content but opera 9 doesn't */
    body {
    text-align:center;
    background:#CC6699;
    }
    #top {
    margin:0 auto;
    background:#CC6699;
    z-index:99;
    height:35px;
    position:relative;
    }
    #wrapper {
    width:100%;
    margin:0 auto;
    padding:0;
    text-align:left;
    background:#fff;
    z-index:1;
    position:relative;
    }
    #header, #footer {
    background:#fff;
    position:relative;
    z-index:5;
    padding:10px;
    border-top:5px solid #000;
    }
    #footer {
    border:none;
    border-bottom:5px solid #000;
    }
    #header h1, #footer p {
    border:1px solid #000;
    padding:25px;
    text-align:center;
    }
    #outer {
    position:relative;
    width:100%;
    clear:both;
    z-index:4;
    }
    #left, #right,#content {
    width:32%;
    z-index:1;
    position:relative;
    float:left;
    margin:0 0 0 1%;
    display:inline;
    left:1px
    }
    #content {
    }
    .col {
    width:32%;
    position:absolute;
    z-index:0;
    left:1%;
    bottom:0;
    border:1px solid #000;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #000;
    }
    .one {
    background:red;
    }
    .two {
    background:#FF6600;
    left:34%;
    }
    .three {
    background:#CC3399;
    left:67%;
    }
    #footer {
    clear:both;
    }
    html>body .col {
    top:0
    }/* hide from ie6 and under*/
    .clearer {
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    /* Note I haven't bothered with box model hacks but you will need to do them for ie5.+ if it worries you */
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    /* the only hacks in this code are here */
    #left,#right,#content{border-top:1px solid #000}
    .col{height:1000em;}
    /*ie5 needs this */
    #footer,#header {height:1px}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="top"></div>
    <div id="wrapper">
    <div id="header">
    <h1>Equal Columns - (No hacks) - Read the <a href="http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/">article</a></h1>

    <p>I lied - there are 2 little hacks for ie6 and under only. View source to grab the code.</p>
    <p>Also note that I haven't bothered with box model hacks for ie5.+ but this method will work fine with those ancient browsers.</p>
    </div>
    <div id="outer">
    <div id="left">
    <p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    text </p>
    </div>

    <div id="content">
    <h2>Equal Columns</h2>
    <p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    text </p>
    <p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    text </p>
    </div>
    <div id="right">
    <p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text </p>

    </div>
    <div class="clearer"></div>
    <div class="col one"></div>
    <div class="col two"></div>
    <div class="col three"></div>
    </div>
    <div id="footer">
    <p>Footer</p>

    </div>
    </div>
    </body>
    </html>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    That code shows rounded corners for me locally.

  7. #7
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    huh... I am also able to see those rounded corners in firefox, but not in IE 7.0.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by swaraj_here View Post
    huh... I am also able to see those rounded corners in firefox, but not in IE 7.0.
    The corners are done with CSS3, which no current version of IE recognizes. You'll either have to add some javascript or images to help those browsers.

  9. #9
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks


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
  •