css layout

[mama]

Hi!

I´m stuck in a problem when I tried to use css for my boardnews and wonder if someone could help me.




css

Code Select Expand



.kantsmf { border: 1px solid #CC6633; float:left; margin:0; padding:3px; width: 28em;

  }

.test2 {
margin:0;
padding:3px;
border-left: solid 1px #ccc;
float: right;

}

#smftop  {margin-top: 150px;
}


SMF code

Code Select Expand

<div class="smftop">
<?php

$array = ssi_boardNews(1.0, 3, null, 250, 'array');

foreach ($array as $news)
{
echo '  
<div>

<div class="kantsmf"><b><a href="', $news['href'], '">', $news['subject'], ' </b>
<span style="font-size: 10px;">

              ', $txt[525], '
              ', $news['poster']['link'], '
 
</span></a> <span class="test2">testing</span></div>

</div>


';

if (!$news['is_last'])
echo '
';
}

?>
</div>


thx in advanced.

[mama]

this is what I get:



If I don´t use float: right; = the layout is almost ok. I need to "send" testing box to right.
If i do use float: right; = then testing box goes down.

[sm2k]

When you float an element, it will float to the left or right of whatever appears *after* it in your HTML.

Consider:

Code Select Expand

.span_left {
  /* some stuff */
}

.span_right {
  float: right;
  /* some other stuff */
}

If you have the following in your HTML:

Code Select Expand

<span class="span_left">Left Side</span><span class="span_right">Right Side</span>

Then the words "Right Side" are going to appear on the right, but one line *lower* than the words "Left Side."

If you reverse the order of your HTML:

Code Select Expand

<span class="span_right">Right Side</span><span class="span_left">Left Side</span>

Then the words "Right Side" will appear on the right on the same line as the words "Left Side", which is what you want.

Remember, HTML is parsed sequentially and order is important.

Reordering your HTML is probably not what you want - if you lift the style sheet then you probably want the text on the right to appear after your text on the left. 

So instead we simply float *both* spans, one left, and one right.  You almost had it. 

Code Select Expand

.span_left {
  float: left;
}

.span_right: {
  float: right;
}

<span class="span_left">Left Side</span><span class="span_right">Right Side</span>

Voila.  When in doubt, give everything a border so you can see what's going on.