tags:

views:

39

answers:

3

So I'm trying to create a forum with avatars, but right now the text is going below the avatars and not beside them. How can I fix this?

Here is the CSS:

.postbox{
    text-align: left;
    margin: auto;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    width: 100%;
    margin-top: 10px;
}   

.postfooter{
    width: 100%;
    border-top: 1px solid #82FFCD;
}

.postheader{
    width: 100%;
    border-bottom: 1px solid #82FFCD;
}

.posttext{
    width: 70%;
    text-align: left;
    border: 1px solid #82FFCD;
}

.postavi{   
    width: 20%;
    text-align: left;
    border: 1px solid #82FFCD;
}

and here is the html:

<div class="postbox"><div class="postheader">
                            <b><span>CyanPrime!!~::##Admin##::~</span></b>

                        </div>
                        <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext">Let's test the Hacker Avatar.</div>
                        <div class="postfooter">
                            [<a href="http://prime.programming-designs.com/test_forum/viewthread.php?thread=25"&gt;Reply&lt;/a&gt;] 0 posts omitted.
                        </div>
                    </div>
A: 

This should do it:

.postavi{ float: left}
graphicdivine
That's what I would think too, but float seems to REALLY break the layout, as seen here: http://prime.programming-designs.com/test_forum/viewboard.php?board=0
William
You're probably not clearing your floats properly.
digitaldreamer
A: 

Add the CSS "float: left;" to the element that must allow the text to be placed side-by-side.

jweyrich
Float messes up the layout way too much.
William
Not really, if one uses it properly. However, IE might still have problems with that.
jweyrich
+3  A: 

You can wrap your divs in a container div and float everything left. Remember to clear your floats.

.clear { clear: both; }

.posttext{
    float: left;
    width: 70%;
    text-align: left;
    border: 1px solid #82FFCD;
}

.postavi{
    float: left;
    width: 20%;
    text-align: left;
    border: 1px solid #82FFCD;
}


<div>
  <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div>
  <div class="posttext">Let's test the Hacker Avatar.</div>
  <br class="clear"/>
</div>
digitaldreamer
This worked, thank you very much. ^_^
William
@William: mark as answer, then! @digitaldreamer: don't use `<br class="clear"/>`, that has effects on layout... use `<div class="clear"></div>` or something else that doesn't effect the remaining layout.
ANeves