CSS float order problem

[wendu]

hey'as!

 

it's about CSS floats.

 

here's my code:

 

<p style="float: left;">This floats to the left</p>

<p style="float: right;">This floats to the right, BUT ON A SECOND LINE!</p>

 

my problem is, how can I make these two P's float on the SAME LINE. I could do it by placing the last P first AND removing the float property from the last P, so it would look like this:

 

<p style="float: right;">This floats to the right, NOW on the same line!</p>

<p style="">This floats to the left</p>

 

HOWEVER; I cannot change the order of these P's. I'm only doing CSS for this lil' project.

 

do I need to set the width on these P's, change their display property or something? this has really been a headachhe

[haku]

I believe the way to do this is to put the right p first and the left p second, floating them both. If you don't want to change the order, then *maybe* you can set their display to inline, and try floating them as is. I don't know if that will work or not though.

[wendu]

I believe the way to do this is to put the right p first and the left p second, floating them both. If you don't want to change the order, then *maybe* you can set their display to inline, and try floating them as is. I don't know if that will work or not though.

 

nope, thanks for your input but it didn't work

 

here's my code

 

<p style="float: left; display: inline;">This floats to the left</p>

<p style="float: right; display: inline;">This floats to the right, NOW on the same line!</p>

[TheFilmGod]

Basic floats 101: Container (<div> or <p>) will shrink wrap its width unless specific width is given. So to float 2 paragraphs on the same line you must specify a width for both so that the added width doesn't exceed the total line width. OR you could make one of those paragraphs smaller.

 

The order doesn't matter - you're floating them and "in theory" they should be on the same line. The reason they aren't on the same line is because they are too big to be both on the same line. Change their widths as necessary. The reason your *hacked solution works is because your floating one paragraph over and the second one wraps around as necessary as no width is set on that paragraph.

[wendu]

I've been able to work something out by changing the order of the DIV's and P's, but I'm not sure I can ask them to do that on production level

 

however, what if I had something like this

 

<p id="first" style="float: left;"></p>

<p id="second" style="float: left;"></p>

<p id="third" style="float: right;"></p>

 

how can I make p with id third float on the same line as p with id first, without changing the order of the P's?

[TheFilmGod]

<p>This floats to the left</p>
<p>This floats to the right, ON THE SAME LINE!</p>

p {
width: 100px;
float: left;
}
p + p {
width: 100px;
float: right;
}

 

Assuming total width size is 200px. Otherwise change width sizes for each p.

 

It's crazy how sometimes I provide people with the answer and then I have to spoon feed them the code for them to actually READ my previously well-explained response.