Stylesheets - overlapping divs

Author

overlapping divs

spolsky

2006-08-19, 6:40 pm

hi,
i have the following html. if padding given for the span it overlaps
the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give
sizes manually. how could i prevent this overlapping?
thanks

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>

<body>

<div style="background-color:#FF0000; color:#FFFFFF; clear:both">
some text before...
</div>
<div align="center" style="background-color:#FFFF00;">
<span style="background-color:#66CC99; color:#FFFFFF; padding:7px;">
The content.
<select>
<option>1111</option>
<option>2222</option>
<option>3333</option>
</select>

</span>
</div>
<div style="background-color:#FF0000; color:#FFFFFF">
some text after...
</div>
</body>
</html>

Nije Nego

2006-08-19, 6:40 pm

On 19 Aug 2006 06:40:57 -0700, spolsky wrote:

> hi,
> i have the following html. if padding given for the span it overlaps
> the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give
> sizes manually. how could i prevent this overlapping?
> thanks
>
> <!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>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
> />
> <title>Untitled Document</title>
> </head>
>
> <body>
>
> <div style="background-color:#FF0000; color:#FFFFFF; clear:both">
> some text before...
> </div>
> <div align="center" style="background-color:#FFFF00;">
> <span style="background-color:#66CC99; color:#FFFFFF; padding:7px;">
> The content.
> <select>
> <option>1111</option>
> <option>2222</option>
> <option>3333</option>
> </select>
>
> </span>
> </div>
> <div style="background-color:#FF0000; color:#FFFFFF">
> some text after...
> </div>
> </body>
> </html>

Decrease the width of the divs for the value of padding width.

--
buy, bought, bye