homepage Welcome to WebmasterWorld Guest from 54.167.249.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




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

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




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

<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




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

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




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

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




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

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




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

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




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

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




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

AFAIK = As Far As I Know

= Såvitt jag vet ;)

ulf_e




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

Thanks!
Eller ska jag säga Tack!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved