How to code this into css?

Discussion in 'CSS' started by klown, Mar 25, 2007.

  1. #1
    I'm trying to get away from tables and my last two designs were totally table less. Anyhow I'm working on another one (for myself this time) and I'm trying to figure out how to code the following picture (snapped within photoshop) into nice css.

    I don't want any tables and this has to be fine in the space provided (62% screen width) without messing up.

    [​IMG]
     
    klown, Mar 25, 2007 IP
  2. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #2
    float the images right, and apply a right margin.
     
    bacanze, Mar 25, 2007 IP
  3. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #3
    If I were you I would set the image into a separated div as backgound-image (same width, height value as the imgage has). After that you will be able to position it wherever you want even with relative or absolute way. Of course you will be able to define the float direction also.
     
    Bagi Zoltán, Mar 25, 2007 IP
    klown likes this.
  4. klown

    klown Peon

    Messages:
    2,093
    Likes Received:
    115
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thats a winner, I think I'll have to create few divs to make sure the lines expand correctly.. Anyhow rep for you :)
     
    klown, Mar 25, 2007 IP
  5. boyponga

    boyponga Banned

    Messages:
    1,013
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    enclose all in one div first then do another two for the layouts, then the rest, do separate divs in each content
    
    <style type="text/css">
    #left
    {
    font-family:verdana; /*You can put any font in here*/
    float:left;
    width:80%; /* you can change it in terms of pixels */
    }
    #right
    {
    font-family:verdana; /*You can put any font in here*/
    float:right;
    width:20%; /* you can change it in terms of pixels */
    }
    </style>
    <div style="margin-left:auto;margin-right:auto;">
    <div id="left">
    <!--Contents here--></div>
    <div id="right"><!--images here--></div>
    </div>
    
    PHP:
     
    boyponga, Mar 27, 2007 IP