Page 1 of 1

Lining up CSS objects horizontally

Posted: Tue Dec 06, 2005 12:18 am
by Luke
I can never get CSS to line up text next to an image or basically line up anything horizontally without using tables. If you aren't sure what I mean, look at my code:

Oh, and I know about float and I dont like it.

Code: Select all

<div class="main_body" align="left">
      <p><span><img src="images/spacer.gif" width="110" height="150" border="1" /></span>
             <span>asdfasda sd fasdf asdf</span> <-- This text should be lined up next to the image beside it but it shows up below.  -- />
     </div>
     <div class="main_body" align="left">
      <h1>Title</h1>
      <p>asdf ad</p>
     </div>

Re: Lining up CSS objects horizontally

Posted: Tue Dec 06, 2005 3:17 am
by andre_c
The Ninja Space Goat wrote:Oh, and I know about float and I dont like it.
why not?
In my opinion float solves the problem in a very clean way

Re: Lining up CSS objects horizontally

Posted: Tue Dec 06, 2005 3:24 am
by foobar
andre_c wrote:
The Ninja Space Goat wrote:Oh, and I know about float and I dont like it.
why not?
In my opinion float solves the problem in a very clean way
I second that. It's a W3C approved way of dealing with your problem, if that makes it any better for you.

Posted: Tue Dec 06, 2005 4:40 am
by Chris Corbyn
Use float.... that's what it's for :) You need to combine it with clear as well most of the time to acheive expected results.

If you're having difficulty using the float attribute I'd have a browse around some articles on A List Apart : http://alistapart.com/

Posted: Tue Dec 06, 2005 5:11 am
by Ree
You can check this as well: http://css.maxdesign.com.au/. Some nice tutorials there, especially float is very clean.

Posted: Tue Dec 06, 2005 10:56 am
by Luke
my problem with float is that text starts at the bottom of the image... I will check out those links, hopefully there's a way to prevent that.