Alignment with float

[DesignerBill]

I want to center a paragraph of text on the same line as and between two <a> tags with images at the left and right edges of a div. Here's my HTML:

<div style="text-align:center;margin:10px;width:780px">
    <a style="width:12%;float:left;margin-left:20px" href="http://validator.w3.org/check?uri=referer">
    <img style="float:left" border="0"  src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /> 
    </a>
	<p style="display:inline;width:60%;font-size:.75em;clear:both;margin:0">
	The pages of this site have been validated as meeting the W3C standards<br/>for
    XHTML Transitional 1.0 and Cascading Style Sheets (CSS) 2.1.
    </p>
	<a style="width:12%;float:right;margin-right:20px" href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="float:right" border="0" width="88" height="31"  src="http://jigsaw.w3.org/css-validator/images/vcss.gif" alt="Valid CSS!" />
    </a>
</div>

The text is not centered and the right image is displayed below the first line of text and the left image. How can I make it work?

 

[Phreaddee]

first of all it will validate but inline styles are very much frowned on by w3.org and the web community at large. I must admit i'm really over people who cannot code properly putting validators on their site!!!

you can make it work if you understand floats which you clearly do not.

float left then clear both then float right and you expect that to stay on one line???? oh dear.

float them all left, remove the clear both put overflow:hidden on the wrapper div.

 

[DesignerBill]

Phreaddee,
I made it work by doing it as you suggested, but I must say the degrading language in your reply was not really appreciated. First, I never intended to keep the inline styles; they were only used to succinctly show all the CSS and HTML together. Second, you are correct, I don't totally understand floats; if I did there would have been no need for me to post the question. There is much I don't know yet, and I joined this forum in hopes of learning a lot more.

 

[mellowyellow]

Floats can be confusing. I only recently figured out that floating everything left is a good way of doing things, when you want something on the left and something on the right.

I'm not sure what XHTML is good for anymore, by the way. It used to be the buzzword, the 'hot' thing. But XHTML 2 is dead, XHTML 1 is basically the same as HTML4, except served up as xml, only you had to go to some lengths to serve it up as such anyway. I'm just unclear as to what the real benefits are to XHTML 1 over HTML4. And I think there aren't any, compared to HTML5. Does XHTML even have a future? I just looked up and there exists an 'xhtml5'. What is that, even?

 

[CaldwellYSR]

Floats can be confusing. I only recently figured out that floating everything left is a good way of doing things, when you want something on the left and something on the right.

I'm not sure what XHTML is good for anymore, by the way. It used to be the buzzword, the 'hot' thing. But XHTML 2 is dead, XHTML 1 is basically the same as HTML4, except served up as xml, only you had to go to some lengths to serve it up as such anyway. I'm just unclear as to what the real benefits are to XHTML 1 over HTML4. And I think there aren't any, compared to HTML5. Does XHTML even have a future? I just looked up and there exists an 'xhtml5'. What is that, even?

I like xhtml over html4 because it's more strict. That being said it doesn't really have a future, html5 is the future.

 

[ronaldroe]

I'm not sure what XHTML is good for anymore, by the way. It used to be the buzzword, the 'hot' thing. But XHTML 2 is dead, XHTML 1 is basically the same as HTML4, except served up as xml, only you had to go to some lengths to serve it up as such anyway. I'm just unclear as to what the real benefits are to XHTML 1 over HTML4. And I think there aren't any, compared to HTML5. Does XHTML even have a future? I just looked up and there exists an 'xhtml5'. What is that, even?

XHTML, as Caldwell said is more strict. It forces you to not code like a retard, which has many benefits, not the least of which is fewer cross-browser layout issues. HTML5 incorporates XHTML syntax, so I'm not sure what the advantage of an XHTML5 would be.

@DesignerBill:
Put your big girl panties on. If you post code that you wrote, especially asking for help, expect it to get shredded. Phreadee tends to be a bit more gruff than most, but he still fixed your issue. Your other option is to just figure it on your own.

 

[PixelPusher]

@DesignerBill

Many folks have issues with floats, so you are not alone there. In truth they are not that difficult once you grasp how they effect the natural flow of the document (html) and other neighboring floated elements. A couple things to keep in mind:

Float Clearing
Parent elements (containing elements) will not expand to the dimension of floated children by default. This is because floated elements do not follow the flow of the document...they are floating. To allow the parent to see these floated elements you will need to use float clearing. This is done by adding the css property "overflow" with a value of either "hidden" or "auto". In most cases, "hidden" is the better choice. This is what Phraeddee was saying.

div.float-container {
 overflow:hiddden;
}

Using the CSS Clear Property
Dont get float clearing and css clear confused. They sound similar but function quite different. By default a floated elements will continue to stack next to one another until end the allotted space is reached. At this point they will wrap to the next line (allotted space). There are occasions where we want to force this break before the "default" wrapping occurs, or start the float on new line. To do this, we use the css property "clear". The different property values target which side you would like to break (clear) the float.

 

[DesignerBill]

@PixelPusher

Thanks for helping to "clear things up".

 

[PixelPusher]

@PixelPusher

Thanks for helping to "clear things up".

Anytime