wrote:
> Hi,
>
>> Not a bug, you are not implementing your floats correctly. Put the
>> right-floated image *before* the regular flow text "Personal Page" in
>> the markup.
>>
>> --
>> Take care,
>>
>> Jonathan
>> -------------------
>> LITTLE WORKS STUDIO
>> http://www.LittleWorksStudio.com
>
> Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
> the extra line is gone but the text+bg does not extend all the way and
> is not centered (the orange box doesn't include the images). Is that
> also solvable in a simple way? I'd be more than satisfied if those two
> browsers can see my page well.
Well David you have a number of errors that is the cause of your
problems. One of which is your in quirks mode without the doctype and a
few others.
Why are your making DIV title display inline? Removing that helps. Now
to get your title DIV to wrap around the floated images your have three
options I can think of:
1) Explicitly define the 'height' of 'title'
2) Use a clearing element (as you are doing but you are missing the
definition of your 'clearer' class)
3) Make overflow of 'title' DIV auto
CODE try it and see:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>CSS test</title>
<style type="text/css">
#main {width: 100%;}
body {background-color: #999999; margin: 0; padding: 0; }
#bannerleft {float: left; }
#bannerright {float: right; }
#title {
border: 3px coral solid;
width: 100%;
color: blue;
background: #000000 url(arn.gif) repeat-x;
font-size: 35px;
text-align: center;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<div id="title">
<img src="test_files/b-l.gif" id="bannerleft" height="90" width="60">
<img src="test_files/b-r.gif" id="bannerright" height="90" width="60">
Personal Page
</div>
</div>
</body></html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Similar Threads
