Welcome to WebmasterWorld Guest from 54.226.32.234

Forum Moderators: not2easy

Message Too Old, No Replies

Text to the left / picture to the right in the same DIV

     

ulf_e

12:02 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



I am trying to get a div to contain text to the left and a picture to the right.
With the "old way" with tables that was easy but no I'm out of ideas, have tried float,clear, and a lot of other properties.

What i want is somthing like this

---------------------
¦MyText X¦
---------------------

The text is leftaligned and the pic (X) is rightaligned.

<div class="boxheader">
MyText<div id="pic">X</div>
</div>

Thanks in advance
/Uffe

brotherhood of LAN

12:04 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



<p style="float:right"><img src="/the/pic" /></p>
<p>Text here?</p>

define a width in the style if you want it 50/50 the length of the DIV...or if you want to align them.

Maybe better in a external stylesheet ;) have to look up those WW tutorials.......

//added
here they are, highly recommended, crash courses for the basics ;)
[webmasterworld.com...]

ulf_e

12:34 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



Thanks alot!
That did it all.

Just one thing, I had to replace the <p> tags with <span> and then averything worked like a charm!

brotherhood of LAN

12:46 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



AFAIK you shoudlnt have to replace it with span, perhaps you already have styles applied to the <p> tags, which meant you had to use another tag to apply what you wanted herE? :)

ulf_e

1:04 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



AFAIK? I'm from sweden... =)
Well I'm kind of newbie on this CSS so i did it the way I knew about...
Thanks again, will study more

WibbleWobble

3:14 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



You could also do it like:

<div class="content"><div style="float:right;">img</div>blahblahblah</div>

Expanding on that should work, anyway.
This [glish.com] glish article demonstrates it well, despite being a little over-complicated for what its doing.

WibbleWobble

3:17 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



Also, couldn't you just do <img src="blah" align="right" /><p>text</p>? I'm pretty sure that works - I've used it, though it is entirely devoid of CSS.

DrDoc

10:17 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



AFAIK = As Far As I Know

= Såvitt jag vet ;)

ulf_e

10:53 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



Thanks!
Eller ska jag säga Tack!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month