Question

Im new to web development and Im having some trouble getting my elements to format properly on the page. The website is being developed using html5/css3, and I am trying to get the “Welcome” justified left, the image box to the right, and then the My Account/Update text to the right of that. Please see the picture.

Everything I have tried so far has either resulted in everything justified to the left, or the elements appearing on separate lines.

Your help is appreciated.

Thanks
Chris

Answer 1

This should help you get started:

http://jsfiddle.net/Eric/u5xvt/

---

HTML

<div class="controls">
    <img src="http://placehold.it/100x100" />
    <span>My Account</span>
    <a>Update</a>
</div>
<p>Welcome,<br /> Chris</p>

CSS

.controls {
    float: right; /* push it to the right */
    width: 200px;
    background: #FFe0c0; /* Just so you can see what is going on */
    padding: 5px;
}
.controls img {
    float: left; /* push it to the left */
    margin-right: 5px;  
}
.controls span, .controls a{
    display: block;
    line-height: 50px;
}