Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #426492

    I created a text box, then I added some classes to style a rounded corner, shaded box with 3 columns. I added a border to the right. The last column also has a right border, and I understand why, but I can’t think of another way of doing it without using tables. Can someone help make a better box with rounded corners and 3 columns with a border dividing the two middle sections?

    Quick CSS code:

    .sb-container {
        border: 2px solid #000 ;
        border-radius: 20px ;
        padding: 20px ;
        background-color: #E3E3E3;
        color: #79afdd ;
        width: 760px ;
        height:200px;
        margin-left: auto ;
        margin-right: auto ;
    }
    .sb-container div {
        height: auto;
        border-right: 1px #47aa42 solid;
    }
    .sb-header {
        text-align: center;
    }
    .sb-column-left {
        width: 28%;
        /* left: 0; */
        background: #E3E3E3;
        position: absolute;
         padding-right: 0px;
    }
    .sb-column-center {
        width: 28%;
        background: #E3E3E3;
        margin-left: 29%;
        position: absolute;
        padding-right: 5px;
    }
    .sb-column-right {
        width: 28%;
        margin-left:58%;
        position: absolute;
        background: #E3E3E3;
        padding-right: 5px;
    }

    Code in text box:

    <div class="sb-container">
    <h3 style="text-align: center;"><span style="color: #47aa42;">QUICK FACTS</span></h3>
    <div class="sb-column-left">FDA Class II clearance for use in active patient monitoring and primary and secondary Alarm Management <a title="Cardiopulmonary Corp. Receives Additional FDA 510(k) Class II Clearance Broadening Bernoulli® Enterprise’s Indications for Use with Medical Devices" href="http://tsgaz.net/bernoulli/cardiopulmonary-corp-receives-additional-fda-510k-class-ii-clearance-broadening-bernoulli-enterprises-indications-for-use-with-medical-devices/">>></a></div>
    <div class="sb-column-center">Top-rated in customer satisfaction with reporting and analytics in KLAS Alarm Management Report 2014<a title="Performance Score" href="http://tsgaz.net/bernoulli/solutions/alarm-management#performance">>></a></div>
    <div class="sb-column-right">Overall performance score of 90.1 from healthcare providers in KLAS Alarm Management Report 2014 <a title="Performance Score" href="http://tsgaz.net/bernoulli/solutions/alarm-management#performance">>></a></div>
    </div>

    http://tsgaz.net/bernoulli/solutions/medical-device-integration/

    Thanks for any help you can give.

    -Fred

    #426522

    Hi Fred!

    Please add following code to Quick CSS

    .sb-column-right {
      border-right: none!important;
    }

    Cheers!
    Yigit

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.