SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do this with CSS?

    Hey!

    I have the following code

    <div style = "margin-left: 10px; margin-top: 10px;">
    <span class = "NavPath"><a href = "../">HostingJudge Home</a> &gt;&gt;
    <a href = "../<?=$CatFile?>.html"><?=$category?></a> &gt;&gt; <?=$name?> </span><br /><br />
    <center>
    <b><?=$name?></b>
    </center>
    <div style = "float: left;">
    <b>Name</b><br />
    <b>Link</b><br />
    <b>Space</b><br />
    <b>Bandwidth</b><br />
    <b>Cost</b><br />
    <b>Features</b><br />
    <b>Current Special Offers</b>
    </div>
    <div style = "float: right;">
    <?=$name?><br />
    <a href = "<?=$url?>"><?=$url?></a><br />
    <?=$MinSpace?> - <?=$MaxSpace?>MB<br />
    <?=$MinBand?> - <?=$MaxBand?>GB<br />
    $<?=$MinCost?> - <?=$MaxCost?><br />
    <?=$features?>><br />
    <?=$special?>
    </div>
    </div>

    As you can see, there are dynamic variables and <?=$features?> can comprises several lines, but in this case it'll be opposite 'Current Special Offers' as if feautures are special offers . I can easily solve this problem with tables, but how can I solve this problem with CSS?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think you'll need to float them as pairs rather than blocks (if I understand you correctly). I assume you want to keep each section together.
    CSS
    Code:
    <style type="text/css">
    .left {
    float:left;
    font-weight: bold;
    }
    .right {float:right}
    </style>
    HTML:
    Code:
    <p class="left">Name</p>
    <p class="right"><?=$name?>Line1</p>
    <br style="clear:both" />
     
    <p class="left">Link</p>
    <p class="right"><?=$url?>Line2 <br /> line 2.5</p>
    <br style="clear:both" />
     
    <p class="left">Space</p>
    <p class="right"><?=$MaxSpace?>MB Line3</p>
    <br style="clear:both" />
    Something like that should work.

    Paul

  3. #3
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works, but the right column ias left aligned. When I added this
    Code:
    .LeftInfo {
      float: left;
      width: 20%;
      font-weight: bold;
    }
    .RightInfo
    {
      float: right;
      width: 80%;
    }
    Something went wrong, new lines appeared in the right column.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Not sure exactly what you are doing but you could add text-align:right; to the right float if you want it aligned to the right.

    Paul

  5. #5
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I removed the 'width' attribute for the left column and left it for the left column and it's working fine now

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Because you specified an 80% width for the right column it means that the float will start 80% from the right, which would have been the same as floating it left.

    Also IE has a rounding bug where 2 floats (or elements) =100% (80+20) and when resizing the window will make the floats bigger tha 100% causing them to drop down a line.

    Making the right float smaller (or as wide as needed) would solve the problem as you have found out anyway.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •