It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right. Here is how you might want your HTML:
<div id="textbox">
<p class="alignleft">Text on the left.</p>
<p class="alignright">Text on the right.</p>
</div>If you were to then give your CSS classes alignleft and alignright values of text-align: left; and text-align: right; respectively, you would get close to your desired result, but your right-aligned text would be bumped down one line because of the new paragraph. Instead, just float your paragraphs:
.alignleft {
float: left;
}
.alignright {
float: right;
}Then just remember to clear your float:
<div style="clear: both;"></div>
Can you place the code for “text on the left, then text on the right” in an existing table? If so, where is the code placed in the table. I need to get numerous rows to do this very thing. Thanks.
It is not clear what to do. what to edit.
More examples should be good or more info here.(about aligning abjects and css files which are necessery to edit)
I know I’m late to the party here but this worked a treat, exactly the tip I was looking for! Thanks heaps! :)
Here’s a simplified method:
<div>
<p style=”float: left”>Text on the left.</p>
<p style=”float: right”>Text on the right.</p>
</div>
Regards,
Mihai
This is great. My only problem with floating elements is that I lose the height of the parent element, since floating removes the element from the normal flow.
For example, check out this jsbin. The floated elements lose their background color, since the containing div effectively has zero height.
I can specify a specific height as a hack, but this feels dirty and of course I’ll have to keep updated the height manually as I change my HTML.
Any ideas?
what you’relooking for is clear on the following element.
eg “clear: both”. Or you can self-clear the element that is losing height by adding “overflow: hidden; width: 100%”, this will cause a re-calculation of its contents and it will see the correct height of all floats within it. The width is needed for IE6 and maybe 7/8 for this to work. It does not have to be 100% but it needs to be something.
Thanks! Just what I needed. Works like a champ.
I am an office assistant and working on our company website is part of my job. I have a tiny bit of experience doing this but most of the time I google the code for what im trying to do. I needed font and a picture at the top of my page to be centered. So I used this:
div {
text-align: center;
}
It worked like a charm! The problem is, once it was centered the left aligned text at the bottom of my page was also centered. I have tried everything, including this and I cannot seem to stop it from centering, any ideas?