Two Cells lined horizontally using CSS

[JSOUL]

I really appreciate the help and I have tried to use the web to find
all sorts of suggestions. Inline doesn't seem to work and I tried it
all over and left the examples in below. While people complain about
the travesty of using tables, I'm finding CSS to be impossible to do
certain things easily and it's not easy to read. All I'm trying to do
is get two "cells" to line up properly. With a table it would be
simple:

<table><tr><td> <img - for image #1> </td><td> Sample Text </tr>
</table>

This yields:

IMG1 Sample Text

Now wasn't that simple? No matter what I do I can't get this done in
css because I keep getting the display vertically. Can drive you
crazy. I get:

IMG1
SampleText


I used the inline tag everywhere to see if it works but it won't.
Here's the code:

in the page.php:

<div id="bannercontainer">
<div id="logoleft"></div>
<div id="bannerright">Sample Text</div>
</div>

in the style.css

#bannercontainer{
width: 773px; /*The width of our layout*/
height: 105px;
background-color: #324580;
display: inline;
}

#logoleft{
width: 773px;
height: 105px;
background: url(../images/logoleft.gif) no-repeat;
display: inline;
}

#bannerright{
width: 485px;
height: 105px;
background-color: #324580;
display: inline;
}

 

[Barbara de Zoete]

All I'm trying to do
is get two "cells" to line up properly. With a table it would be
simple:

<table><tr><td> <img - for image #1> </td><td> Sample Text </tr>
</table>

Go see <URL:http://home.wanadoo.nl/b.de.zoete/_test/table-row_emulation.html> I
just knocked up for you.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[JSOUL]

FIXED THIS ONE -- for some reason inline wasn't working initially and
then I noticed a typo in this example when I tried it again. Thanks
for even thinking of helping.

 

[Barbara de Zoete]

FIXED THIS ONE -- for some reason inline wasn't working initially and
then I noticed a typo in this example when I tried it again.

You ask for 'two cells', then you talk about 'inline tags' (I assume you mean
the inline property you can use with selectors in css). These are two very
different things. The first, the cells, are part of tables, which with css can
be emulated with the value 'table-cell' for the display property. The second,
the inline property, makes an element behave in modern graphical browsers as if
it was, eh, yeaheh, an inline element. No cells there. Turns out your question
is a bit ambigu.

To your original question:
Did you actually even bother to look at the reply I posted? You might learn
something from it, God forbit.

<div id="bannercontainer">
<div id="logoleft"></div>
<div id="bannerright">Sample Text</div>
</div>

With me will only be:
<div id="bannercontainer">
<span><img><span>
<span>text</span>
</div>

With css I make those spans behave as if they are table cells. Go see the
example I pointed you to in the previous post.

You can address the spans in the above example using the selector
'#bannercontainer span' or the image directly with the selector
'#bannercontainer img' (for that you could even leave out the containing span
around the image). In short: by using proper markup with well chosen, logical
(decendent) selectors, you can simplify your code a bit, making it less hard to
read and maintain.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'