Ghettotoddy Ghettotoddy - 7 months ago 11
HTML Question

I'm trying to float a <p> tag in a forum setup

I'm currently making a forum setup where users can view, post and respond to topics. The bit I'm posting here is the "reply to a topic bit". Where the top post is "Topic", and the "reply" bit is at the bottom. Inbetween I have "posted answers" to said Topic.

The problem I'm having is that the "p" tag wont position itself to the right of the user who posted his/her reply, like the replyfield at the bottom does.

I have tried to copy/paste the reply bit on top of each other, and they align nicely, but once I change the

textarea
tag to a
p
tag it wont work.

NOTE: The posts will later on be converted to actual posts using PHP, this is just for testing

Thanks

Here is the code:

HTML



<div class=forumListWrap>
<div class="col-1-forum">
<h2>TITLE</h2><!--TITLE-->
<button type="button" class="forumBtn">Add a Reply</button>

<div class="topic">
<h6>Topic</h6>
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3><a href="profile.html">View Profile</a></h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM</p>
</div>
</div>
</div>
</div>

<div class="reply">
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3><a href="profile.html">View Profile</a></h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM LOREM</p>
</div>
</div>
</div>
</div>

<div id="horiLine"></div>

<div class="col-2-reply">
<h2>Reply to thread</h2>
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
</div>
</div>

<div class="col-3-reply">
<div class="answerField">
<textarea></textarea>
</div>
<input id="replySubmit" type="submit" value="Submit">
</div>
</div>
</div>





Please see code.

Answer

See the updated jsFiddle for a possible Variant.

Explanation of what i did:

  • i set a width for the column with the username (col-3-reply) to 20% and also made it float left
  • i set the width of the reply-content to 80%
  • i added a antifloat div below. This is because floating elements are treated differently, and by adding this, you can have them still inside the box with the grey border of the reply.

Here are the antifloat CSS rules. See the jsFiddle for all details:

.antifloat {
    height: 0;
    width: 0;
    clear: both;
}

As a general hint: Check out the new CSS 3 flexbox ( display:flex; ) it has very good support in all modern browser and is way easier to understand,write and read.