Mac / Safari float right and left problem
We recently had a compatibility issue with a design that didnt quite fit in Safari.
Example, lets assume you have 2 divs inside a container.
<style>
#container{
border:1px solid black;
display:inline;
}
#left{
float:left;
width:200px;
border:1px solid green;
}
#right{
float:right;
width:200px;
border:1px solid yellow;
}
</style>
<div id="container">
<div id="left">
Left!
</div>
<div id="right">
Right!
</div>
</div>
#container{
border:1px solid black;
display:inline;
}
#left{
float:left;
width:200px;
border:1px solid green;
}
#right{
float:right;
width:200px;
border:1px solid yellow;
}
</style>
<div id="container">
<div id="left">
Left!
</div>
<div id="right">
Right!
</div>
</div>
This will have the right div flush against the left with no gap between. This is because browsers except Safari assume the container takes up 100% of the space it lives in when no width is supplied.
Adding width 100% to the container solves this in Safari.
#container{
border:1px solid black;
display:inline;
width:100%;
}
border:1px solid black;
display:inline;
width:100%;
}
greetings from Berlin, Germany
javanita