Forum Moderators: not2easy
<div id='header'>
<div id='hdr-right'>
<img src='/images/logo.gif'>
<a href='#'>A link</a>
<a href='#'>A link</a>
<a href='#'>A link</a>
</div>
Some text
</div>
#hdr-right { float: right; border: 1px solid red; }
#hdr-right IMG {float: right; margin-left: 20px; }
#hdr-right A {
display: block;
font-size: 11px;
line-height: 12px;
text-align: right;
color: #0C4DA1;
text-decoration: none;
}
The border is only present so I can see where on the page it's being placed.
The problem is, with the logo image floated right, the hdr-right div expands to full width, somewhat rendering the floating part pointless.
[edited by: Dabrowski at 3:43 pm (utc) on Sep. 18, 2008]
What I do find strange is that both render the links under the image instead of to the left of the image where I'd expect them.
Opera renders the links next to the image as I'd expect.
To trick firefox and safari to render the links next to the image, all that's needed seems to be some text between the image and the links .
I guess you were looking at it with IE (which version ?)
The stuff I was playing with (delete the line "Serendipity" to see the (for me) somewhat unexpected effect in Firefox 3 and safari (where Opera act different).
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
#hdr-right {
float: right;
border: 1px solid red;
}
#hdr-right IMG {
float: right;
margin-left: 20px;
}
#hdr-right A {
display: block;
font-size: 11px;
line-height: 12px;
text-align: right;
color: #0C4DA1;
text-decoration: none;
}
</style>
</head>
<body>
<div id='header'>
<div id='hdr-right'>
<img src='image.jpg' alt="alt" />
Serendipity
<a href='#'>A link</a>
<a href='#'>A link</a>
<a href='#'>A link</a>
</div>
Some text
</div>
</body>
</html>
The links were on the left ok, problem was the 'Some text' was being pushed down.
This was in IE7 and FF2. I got around it easily enough by adding a 50% width to 'header', just thought it was strange and wondered if it was a known issue, a float within a float with no widths?
