cannot handle div's

[Harm]

hello, i'm trying to make three div's to appear in one line

 <div id="bottom"><i>
 <div style="float: left"><h2>Mus galite rasti:</h2>
 Uzupio g. 3 (Angelo skvere), Vilnius</div>
 <div class="border"><h2>Skambinkite:</h2>
 Tel. 112<br />
 Mob. 911</div>
 <div style="float: right"><h2>Rasykite:</h2>
 [e-mail]</div>
 </i></div>

but this doesnt work. i want it to be in one row, like in table:

<table><tr><td>here</td><td>here</td><td>and here</td></tr></table>

how do I make this?

[edited by: Harm at 7:27 pm (utc) on July 18, 2007]

[edited by: DrDoc at 7:31 pm (utc) on July 18, 2007]
[edit reason] Examplified email address [/edit]

[DrDoc]

How is your

.border

class styled?

[Harm]

#bottom div.border {
width: 30%;
border: 1px solid rgb(164,82,0);
border-width: 0 1px;
}

you can preview my work at <no, we can't [WebmasterWorld.com]>

[edited by: DrDoc at 7:30 pm (utc) on July 18, 2007]

[Harm]

ah yes, right, was not fast enough to remove the link. forgot that 'no links here'. sorry
and, yes, my doctype is DTD XHTML 1.0 Transitional

[edited by: Harm at 7:35 pm (utc) on July 18, 2007]

[DrDoc]

No worries ;)

How do they appear now? I take it that your left and right line up the way you want. And there appears to be enough room for the center one as well.

And, what happens if you assign

float: left

to the

.border

class as well?

[edited by: DrDoc at 7:53 pm (utc) on July 18, 2007]

[Harm]

erm.. well. i don't really get what u want to say but
those div's looks like this:

[blah]
.....[blah]
..........[blah]

and i want it to be:

[blah] [blah] [blah]

and when I assign float: left to the .border class, elements moves few pixels somewhere but doesnt change the view :)

[edited by: Harm at 7:45 pm (utc) on July 18, 2007]

[Harm]

I think I can simplify the code:

<div id="the_big_one">
<div>1...</div>
<div>2...</div>
<div>3...</div>
</div>

all those will be in separate lines now.
and I need them to be in one line somehow:-)

[HarryM]

Try putting Divs 2 and 3 in another div which is floated right. It works for me.

<div id="the_big_one">
<div>1... (float left) </div>
<div> (new div, float right)
<div>2... (float left) </div>
<div>3... (float right) </div>
</div>
</div>

[g1smd]

That looks like an awful kludge that I guess will break in a number of browsers.

I would maybe have used three headings and three paragraphs, inside the one div.

[HarryM]

That looks like an awful kludge that I guess will break in a number of browsers

Nope - all my 3-column sites use that layout. It works on all browsers that can handle float.