471,066 Members | 1,290 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,066 software developers and data experts.

overlapping divs

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>

Aug 19 '06 #1
1 2153
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
Aug 19 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Peter Jenkins | last post: by
1 post views Thread by Mitch | last post: by
8 posts views Thread by gpbmike | last post: by
2 posts views Thread by Daphne Tregear | last post: by
2 posts views Thread by Kalvin | last post: by
3 posts views Thread by michelle koen | last post: by
2 posts views Thread by Jakub Ɓukomski | last post: by
2 posts views Thread by Liam Gibbs | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.