CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 1203

html and css formatting

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

welcome bar

Upvotes: 0

Views: 102

Answers (5)

avramov
avramov

Reputation: 2114

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/

Upvotes: 1

Eric
Eric

Reputation: 97571

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;
}

Upvotes: 2

ayyp
ayyp

Reputation: 6598

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.

Upvotes: 0

Brandon Taylor
Brandon Taylor

Reputation: 34553

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.

Upvotes: 0

dasheddot
dasheddot

Reputation: 2966

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

Upvotes: 0

Related Questions