Hi,
I have two paragraphs, and I am trying to get the second one to

float:left;

But the paragraph just stays where it is, without floating.
I added <div class="clear"></div> to my html, but that did not help.
Can anyone see what I am doing wrong?
Url is www.accupresh.com

Thank you!

Recommended Answers

All 6 Replies

Member Avatar for stbuchok

what does the css clas clear define?

You are probably thinking style="clear: both;"

right.
In my css, I have .clear:{clear:both;}

Member Avatar for stbuchok

.clear {clear:both;}

remove first colon

Can you provide the relevant HTML code. The clear:both style is generally used after the floats so that you ensure that the content you are applything this to is "clearing" both the left and right float.

Clear both clears the float on both sides. Clear left clears the float on the left, and clear right the float on the right.

Paragraphs are block elements. In order to place to paragraphs next to each other, you have to float both paragraphs.

<p style="float: left;">The left paragraph</p>
<p style="float: left;">The right paragraph</p>

You may want to define a width for each paragraph, as the float command converts them into inline elements. Besides any inline element after the second paragraph will be placed on the right of the second paragraph, if there is still space.

I would recommend the following solution:

<div style="display: table; width: 100%">
    <div style="float: left; width: 50%">
        <p>The left paragraph</p>
    </div>
    <div style="float: left; width: 50%">
        <p>The right paragraph</p>
    </div>
</div>

Now you can fill the first table with a background color which is visible although the element is containing float elements.

No more, no less. @Baradaran's right.

by the way, just a clarification of what you want. Since you mentioned clear: both, by anychance is this(A) what you wanted to do? or (B)?

(A)
|--------------------------|
|[PARAGRAPH 1]             |
|[PARAGRAPH 2]             |
|                          |

(B)
|--------------------------|
|[PARAGRAPH 1][PARAGRAPH 2]|
|                          |
|                          |
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.