|
|
Posted by Thomas Jollans on 10/03/06 05:59
On Mon, 02 Oct 2006 22:23:28 -0600, "richard" <don@john.son> let this
slip:
> Simple 3 division design. I want the text in the middle division to be
> centered.
>
> If I remove the "float" next to text-align, the right side division
> breaks.
This works with modifications. see below. (also added general notes)
> <?xml version="1.0" encoding="windows-1252"?>
DON'T use windows-xxxx encodings in XML or web content in general. Use
UTF-8 or an ISO encoding, such as iso-8859-1 (also known as latin1).
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"
> />
this is better set in an HTTP header. also, see above for the encoding.
> <title>test</title>
>
> <style type="text/css">
> body {background-color:white; width:100%; margin: 0 0 0 0;}
>
> #container{background-color:white; width:100%; margin:0 0 0 0;}
> #hd1{width:150px; height:150px; background-color:#0055ff; float:left; }
> #hd2{display:block; text-align:center; float:left; }
remove the float.
> #hd3{margin:0 0 0
> 0; width:150px; height:150px; background-color:#0055FF; float:right;}
>
>
> </style>
>
>
> </head>
> <body>
>
> <div id="container">
>
> <div id="hd1">
> sample left text
> </div>
> <div id="hd2">
> sample middle text
> </div>
> <div id="hd3">
> sample right text
> </div>
swap hd2 and hd3, since hd3 will float "over" hd2. CSS float behaves just
like img align.
> </div>
>
> </body>
> </html>
Hope this helps.
--
Thomas Jollans alias free-zombie
Navigation:
[Reply to this message]
|