float inside div 2

[theEclipse]

Hello,

I am trying to float two elements, both of which are inside a parent div. It seems to me that whenever I put float in the css definitions, the element gets pulled out of the document flow and stuck on the far side of the screen.

Basic idea is this:

<div>

<div style="float:right;">
</div>

<div style="float:left;">
</div>

</div>

any ideas as to why that wont work for me?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[BillyRayPreachersSon]

How isn't it working? The description you've given sounds exactly like what would happen with the code above.

Maybe you should tell us what you are trying to achieve (in more detail than "trying to float two elements").

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theEclipse]

Sorry....I starting to fade away, it was 1am when I posted.

Lets go with an online example:

http://robertcarpenter.net/csstemplate.php

Here is the code for the red and green divs:

<div class="content">
<div style="float:left; background-color:#f00;">
Lorem ipsum dolor sit amet
</div>, 
<div style="float:right; background-color:#0f0;">
consectetuer adipiscing elit
</div>. 

In aliquet. Sed risus. Phasellus egestas .....
</div>

What I would expect to happen is to have both the green and the red at the very top of the document, red on the left and green on the right. Instead what happens is the green appears below the bottomline of the red. Both are still in place on their sides, but not at the top.

I tried adding [tt]clearleft|right|both)[/tt] and [tt]display:inline[/tt] to their styles, but that didnt help at all.

Does that make sense now?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[theEclipse]

any ideas ??

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[steven290]

yes switch the order

<div class="content">
<div style="float:right; background-color:#0f0;">
consectetuer adipiscing elit
</div> 
<div style="float:left; background-color:#f00;">
Lorem ipsum dolor sit amet
</div>

right on top of left

 

[theEclipse]

thanks for the answer, but no such luck. As I thought, switching the order of the elements just switches which one is on top.

any other ideas?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[theEclipse]

I've figured out my problem....its in the spec!

http://www.w3.org/[/URL]]
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

In short, two floats cannot overlay vertically (even if they do not overlap horizontally.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[kaht]

You need to remove the content that is defined between your divs. Right now you have a comma seperating them. Removing that will keep them on the same line:

<div class="content">
   <div style="float:left; background-color:#f00;">
      Lorem ipsum dolor sit amet
   </div>    [red]<-- no comma here[/red]
   <div style="float:right; background-color:#0f0;">
      consectetuer adipiscing elit
   </div>
   In aliquet. Sed risus. Phasellus egestas accumsan ante. Nulla nulla elit, rhoncus nec, gravida nec, scelerisque in, nisi. Vivamus consectetuer enim nec odio. Nam ut est a magna laoreet tincidunt. In vitae nisi sed nisi gravida fringilla. Cras tempus, magna vitae lacinia placerat, massa neque dictum diam, nec malesuada est nisi vitae odio. Praesent arcu. Duis quis orci et ligula tincidunt convallis. Sed odio urna, nonummy sed, tristique quis, dignissim sed, orci. Fusce vehicula aliquam ligula. Nam pulvinar odio ac metus. Nunc convallis pulvinar quam. Praesent arcu. Nunc eget massa non ligula rhoncus mollis. Nulla facilisi.
</div>

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[kaht]

theEclipse, did my solution solve your problem? I saved a local copy to my desktop and was able to get the look you desired.

From your last post I was under the intention that you had thought it impossible, when in fact it is not. However, I could be reading it wrong.

Please let us know the outcome.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[theEclipse]

whew!

That was the ticket! thanks. After posting the spec quote, I got to thinking about it more and more and doing some testing and found some stuff that was wierd. I extended the divs down so that they were height > one line and they were still one line seperated from each other. This really confused me and I gave up.

Thanks for the tip!

and hey..btw.. are you aware that there is a syntax error in your sig?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[kaht]

and hey..btw.. are you aware that there is a syntax error in your sig?

You'll have to take that one up with D&D

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]