Need help with CSS problem

Discussion in 'CSS' started by RogerDodgr, Jun 5, 2010.

0
  1. #1
    I am using a CMS (Drupal) and do not have control of the order in which HTML tags appear in the teaser. The order is content first and image second like this:
    
<font id='content' style="?">...</font>
...
<img src=... style="?"/>
    Code (markup):
    ...content before image. (I can not change that.) I can change the font tag to a div tag though.

    In this teaser I want the layout to be like this:
    
----------------------------------------
|                        |             |
|   content              |   image     |
|                        |             |
----------------------------------------
    Code (markup):
    How can I do this with CSS? I could inject a table instead; would a table be a better approach than CSS?

    Thanks in advance.
     
    Last edited: Jun 5, 2010
    RogerDodgr, Jun 5, 2010 IP
  2. sudharsan

    sudharsan Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #2
    <font id='content' style="float:left;">...</font>
    ...
    <img src=... style="float:left"/>

    <div style="clear:both;"></div>
     
    sudharsan, Jun 5, 2010 IP
  3. Abhik

    Abhik ..:: The ONE ::..

    Messages:
    11,337
    Likes Received:
    606
    Best Answers:
    0
    Trophy Points:
    410
    Digital Goods:
    2
    #3
    You can also wrap them in a div and specify the width and let the both float left

    #wrap {width:600px}
    #box1 {width:450px; float:left;}
    #box2 {width:150px; float:left;}

    <div id="wrap">
    <div id="box1">...content...</div>
    <div id="box2">...content...</div>
    </div>

    You can also use tables instead, but tables aren't too much customizable.
     
    Abhik, Jun 6, 2010 IP