Grow your CSS skills. Land your dream job.

box with 2 columns growing up vertically

  • # March 3, 2009 at 7:50 am

    Hi there, I’m new in this forum and I’ve to say I don’t know speak english so much, so I’m sorry and I’ll try to explain me correctly.
    My problem appear when I’m trying to do boxes who grow up vertically and it has 2 informations columns.
    This box has an aspect like #24: Rounded Corners video by Chris Coyer on this web.
    My HTMLs code:

    Code:

    trabajos > 3d > infoarquitectura

    Presentación:

    Bienvenid@.

    Columna 1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Columna 2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    CSS code:

    Code:
    /*contenido principal
    ————————————————————————————*/

    .top{
    background: transparent url(../imagenes/arriba.png) no-repeat top;
    float:left;
    width:600px;
    height:16px;
    }
    .bottom{
    width: 600px;
    height:67px;
    background: transparent url(../imagenes/pie/portadapiefin.png) no-repeat;
    float:left;
    }
    .middle{
    background-color:#d7e5b6;
    border-left:3px solid #FFF;
    border-right:3px solid #FFF;
    width:594px;
    xpadding:0;
    float:left;
    }
    .wrapper-info{
    width:600px;
    float:left;
    padding-bottom:15px;
    }

    #column1 {float:left; width:250px;}
    #column2 {float:left; width:250px;}

    OK, i don’t know how can i do this box with two informations columns, being this information something like pics, texts etc.

    IS correct this method I’m using to do box?

    Thanks a lot and I’m sorry my english. (I’m from Canary Islands, Spain).

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".