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
This should help you get started:
http://jsfiddle.net/Eric/u5xvt/
<div class="controls">
<img src="http://placehold.it/100x100" />
<span>My Account</span>
<a>Update</a>
</div>
<p>Welcome,<br /> Chris</p>
.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;
}
The CSS way of doing it is by using the float attribute.
<div class="Header">
<div class="Welcome"></div>
<div class="Image"></div>
<div class="MyAccount"></div>
<div class="clear"></div>
</div>
<div class="Body">
...
</div>
...
And the CSS for that:
.Welcome { float: left }
.Image { float: right }
.MyAccount { float: right }
.clear { clear: both }
The clear:both part's purpose is to make the Header expand around its contents - otherwise, Welcome, Image and MyAccount would actually appear on top of whatever's in Body.
Check out this great tutorial: http://css.maxdesign.com.au/floatutorial/
You could try to Set float:left to get column like layout. In CSS3 maybe http://intensivstation.ch/files/css3/columns.html helps you too
One approach is to wrap the elements on the right in a div that is floated right. Within that div, you'd want to display the image as a block element and float it left.
Without seeing code samples, I can only attempt to help. I would suggest wrapping all of your elements in something like a header tag, and then doing text-align:left;. Then, in theory, but floating your img to the right it should appear all on one line. Once code is posted I can test it further.
