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?
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.
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.
{
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>
