Sent by Andy Pemberton on 29 November 2006 18:06
Mark:
This is quite an interesting case. Aparrently, applying "hasLayout" to the
#header_right element is causing a rendering bug in IE that is adding extra
space between the #header_left and #header_right elements. See the reference
below for a description of "hasLayout" and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element "hasLayout"
Width and height both trigger "hasLayout" in IE and in this case, width
is not necessary as your DIV is a block level element that will
automatically fill the remaining (604) pixels. So remove both to prevent
this issue. If it is absolutely necessary to define the height, use the 2nd
solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space removed by
the negative margin from the #header_left element. However, there is a
margin-left on the #header_right element which will cause the right
container to be displayed to the right of the left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've used to
combat the float-drop problem often encountered in IE (see reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL-REMOVED]> wrote:
>
> Hi all,
>
> So in my quest to use less absolute positioning (why, because I
> wanted to try it.) I've come up against some floats not floating next
> to each other. I've written a short test page here, and the css is in
> page.
>
> http://www.tonedeafstudios.com/test/test21.html
>
> And here is the very short code.
>
> <CODE>----------------------------------------------
>
> <!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">
> <head>
> <title>Untitled</title>
> <style type="text/css" title="text/css">
> /* <![CDATA[ */
> html, body {
> padding: 0;
> margin: 0;
> }
>
> body {
> font-size: 12px;
> font-family: "Trebuchet MS", "Gill Sans", Verdana, Tahoma,
> sans-serif;
> line-height: 150%;
> color: #000;
> background-color: #292b68;
> min-width: 775px;
> text-align: center;
> }
>
> #wrapper {
> text-align: left;
> margin-right: auto;
> margin-left: auto;
> position: relative;
> width: 775px;
> }
>
> #header_left {
> float: left;
> background-color: green;
> width: 171px;
> height: 168px;
> }
>
> #header_right {
> background-color: red;
> width: 604px;
> height: 168px;
> margin-left: 171px;
> }
> /* ]]> */
> </style>
> </head>
> <body>
>
> <div id="wrapper">
>
> <div id="header_left"></div>
> <div id="header_right"></div>
>
> </div>
>
> </body>
> </html>
>
> </CODE>-----------------------------------------------------
>
>
> It's one div floated left against another div, but in IE6 it floats
> the div left, but then the adjacent div is kitty-corner to floated
> div. I'm sure there is a bug in IE regarding this, but I've looked
> and can't seem to find it.
>
> The two divs have stated heights and widths and are enclosed in a
> wrapper to center the whole thing on the page.
>
> Any help would be great.
>
> Thanks,
>
> Mark
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
