Problem: I cant float left from bottom left

I am new here from this forum

Problem: I cant float left from bottom left



Here is my Sample website: http://raineerdelarita.comuv.com/test/

Thanks

 

You need to wrap the userName divs in a wrapper. Like the code below, take out the in-line styles and add to your stylesheet.

            <div class="entries" style="float: left; width: 650px;">
                <div class="userName">
                    <img src="images/5.jpg">
                    <h4>Username</h4>
                    <span>August 4,2014</span>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>

                <div class="userName">
                    <img src="images/5.jpg">
                    <h4>Username</h4>
                    <span>August 4,2014</span>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
           

            <div class="sideBar">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
            </div>

Code (markup):

You also will need to update the CSS to take less room so the elements can fit:

#content #section1 .userName{
width: 650px;
margin-top: 10px;
background: #ffffff;
float: left;
clear: both;
}
#content #section1 .sideBar {
width: 325px;
height: 250px;
float: right;
background: #cccccc;
margin-top: 10px;
}

Code (markup):

 

Paste the below code in HTML as we need to separate the right side content in to one div from image with class name article-content

<div class="userName"> <img src="images/5.jpg">
<div class="article-content">
<h4>Username</h4>
<span>August 4,2014</span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>

And add CSS like below

.article-content{
float:left;
width:500px;
}

.article-content p{
margin-left:0px;
}

If you add more content, it will increase in right side in future also.Din't hesitate to ask if you find any issue. I am here to help you

 

I think I code it right already, I guess. Thank you guys. I

 

You think that code was "right"? It was like reading a 4 year old's attempt at HTML and CSS.

 

I'm new to html and Css. Is it okay already? I am going to make new again like a harder one. Thank you for the help and to the forums.