How to do this with CSS?

[Mike Borozdin]

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?

[Paul O'B]

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

<style type="text/css">
.left {
float:left;
font-weight: bold;
}
.right {float:right}
</style>

HTML:

<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

[Mike Borozdin]

It works, but the right column ias left aligned. When I added this

.LeftInfo {
  float: left;
  width: 20%;
  font-weight: bold;
}
.RightInfo
{
  float: right;
  width: 80%;
}

Something went wrong, new lines appeared in the right column.

[Paul O'B]

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

[Mike Borozdin]

Paul,

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

[Paul O'B]

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