Posted by loudking on 06/04/07 08:29

Hello, all.

I am a newbie to CSS and are trying to create a three columned
webpage. In order to make it more beautifle, I would like to use a
round corner box to stand for each column.

However, my code does not work correctly. Could anybody please tells
me how to improve it? Thanks in advance.

Part of CSS file:

#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#ECB9E8;
z-index:100;
}

..box {font-size: 2em;}
..box { width: 20em;
background: url(images/bottom-left.gif)
no-repeat left bottom;}
..box-outer { background: url(images/bottom-right.gif)
no-repeat right bottom;
padding-bottom: 5%;}
..box-inner {background: url(images/top-left.gif)
no-repeat left top;}
..box h2 { background: url(images/top-right.gif)
no-repeat right top;
padding-top: 5%;}
..box h2, .box p { padding-left: 5%;
padding-right: 5%;}

Part of HTML file:

<div id="leftcol"><!-- begin leftcol -->
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2> Items </h2>
<p> biu </p>
<p> biu2 </p>
</div></div></div>
</div><!-- end leftcol -->

<div id="rightcol"><!-- begin rightcol -->
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2> Shopping Cart </h2>
<p> History </p>
<p> Total Amount </p>
</div></div></div>
</div><!-- end righttcol -->

<div id="centercol"><!-- begin centercol -->
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2> Details </h2>
<p> dddddddddddd </p>
<p> eeeeee </p>
</div></div></div>
</div><!-- end centercol -->

[Back to original message]