CSS Problem: How to combine three columns with round corner box?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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 {
    width:220px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    width:200px; /* actual value */
    margin:0 0 -10px 0;

.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><!-- 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><!-- 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><!-- end centercol -->

Re: CSS Problem: How to combine three columns with round corner box?

loudking wrote:
Quoted text here. Click to load it

Post a URL, not code.


Site Timeline