Topic: Side by Side Spans

Hi. I'm trying to set up a template that would allow the coder to fit content into two seperate spans, side by side. What I'm getting thus far is a page where the contents in the first span simply go on until they are finished, and then it is followed by the second span.

<span align="left" style="
  position:relative;
  left: 3px;
 background:red;
 width:50px;">

<!-- Lots of example text -->

</span>


<span align="left" style="
  position:relative;
  right:3px;
 background:blue;
 width:50px;">


 <!--Lots of example text-->


</span>

Any help would be appreciated. Thanks.

how wide is the element that is containing the two spans? If its narrower than 100px then it can't fit them side by side so it pushes the one down where it will fit. Also if the containing element is only 100px wide and the content of one of the spans is wider than 50px it will push the span wider causing it to drop down as well.

span align="left" style="
position:relative;
right:3px;
background:blue;
float:right;
width:50px;">



.:[ Never resist a perfect moment ]:.

yeah like bit said I widened the example to accomodate actual words

Actually that doesn't entirely work but it's the theory.

And they should be divs. check out: Blocks vs Inline elements



.:[ Never resist a perfect moment ]:.

For starters, get that 'align' out of there. It has no place in your mark up. The 'style' has no business being there in this case either - make a class and define it in your CSS.

Secondly, this should most likely be two <div>'s and not <span>'s here.

Thirdly, the method you are using to position these seems overdone.

Get rid of the 'position' attribute altogether.
Simply setting a width, and setting float:left on both elements will get you the basics of what you want.
Playing with margins and padding will get you the rest of the way there.

If you need more specific help. you'll need to provide a more complete example (a link to the page, for instance).

quote:

---

bitdamaged said:

span align="left" style=" position:relative; right:3px; background:blue;float:right; width:50px;"> .:[ Never resist a perfect moment ]:.

---

This is exactly what I ended up doing, plus changing the "spans" to "divs", and it works great. I tried removing the "position" attribute as DL-44 suggested, but that didn't quite work for some reason.

Both bit's and JKMabry's examples were very helpful. I basically emulated that and extended the width to just under half of the parent element's own width.

Also, thanks for the link on block and in-line elements, bit. Helped clear up some misconceptions.

Thank you all for your help. I think I finally have this thing going where I want it to. Sorry I couldn't show the actual page. It's sitting on an intranet server.