Topic: Side by Side Spans Pages that link to <a href="https://ozoneasylum.com/backlink?for=26327" title="Pages that link to Topic: Side by Side Spans" rel="nofollow" >Topic: Side by Side Spans\

 
Author Thread
Alexer
Bipolar (III) Inmate

From: Juneau, Alaska
Insane since: Jun 2004

IP logged posted posted 07-25-2005 22:07 Edit Quote

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.

code:
<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.

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 07-25-2005 22:16 Edit Quote

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.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 07-25-2005 22:16 Edit Quote

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



.:[ Never resist a perfect moment ]:.

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 07-25-2005 22:20 Edit Quote

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

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 07-25-2005 22:20 Edit Quote

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 ]:.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-25-2005 22:31 Edit Quote

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).

Alexer
Bipolar (III) Inmate

From: Juneau, Alaska
Insane since: Jun 2004

IP logged posted posted 07-25-2005 23:53 Edit Quote
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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu