Hola. Estoy creando una web con CSS. La misma es una web de cabecera y dos columnas. La columna de contenido lleva un objecto flash, de 400 px de ancho, y quiero que flote a la derecha.
El HTML completo que escribí es el siguiente
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aeolus Group</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<!--Layout Wrapper -->
<div id="Wrapper">
<!--Browse bar -->
<div id="masthead"><a href="#">Home</a> | <a href="#">Quality</a> | <a href="#">Career</a> | <a href="#">Contact Us</a> | <a href="#">Site Map</a><br />
</div>
<div id="content">
<div id="feature">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','200','src','flash/aeolus new','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/aeolus new' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="200">
<param name="movie" value="flash/aeolus new.swf" />
<param name="quality" value="high" />
<embed src="flash/aeolus new.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="200"></embed>
</object></noscript>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p> <br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> <br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p><br />
</div>
</div>
<!--Login AESHARE Portal -->
<div id="login">
<p> <span class="aeshare"><b>AESHARE Portal</b></span><br /><br />
<form id="form1" name="form1" method="post" action="">
Login<br />
<input name="log" type="text" id="log" size="15" /><br />
Password<br />
<input name="password" type="text" id="password" size="15" /><br /> <br />
<!--Spaced temporally. Check out CSS later -->
<input type="submit" name="button" id="button" value="send" />
</form>
<p> </p>
<br /><br />
<img src="images/logo.jpg" alt="Logo" />
</div>
</div>
</body> y el CSS..
Código:
* {margin:0; padding:0;}
#Wrapper {
margin: 5px auto;
position: relative;
width: 800px;
height: 600px;
border: 1px dotted #00c;
}
body{
font-family: "Georgia",serif;
font-size:13px;
color: #333333;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color:#ccf;
}
#masthead{
font-family: "Trebuchet MS",sans-serif;
font-size:15px;
background-image:url(../images/background_header.jpg);
padding-top:140px;
padding-bottom:9px;
padding-right:10px;
text-align:right;
color:#FFFFFF; /* color | barritas separadoras*/
}
#login{
font-family: "Trebuchet MS", sans-serif;
font-size:13px;
margin: 5px 79% 0 5px;
padding: 15px 0px 0px 15px;
background-image:url(../images/background_login.jpg);
background-repeat:no-repeat;
background-position:top left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height:168px;
}
.aeshare {
font-size:13px;
color:#333333;
}
#content{
float:right;
width: 77%;
margin: 0;
padding: 5px;
border: 1px dotted #00c;
}
#feature{
padding: 5px;
font-size: 100%;
}
#feature object{
width: 420px;
float: right;
padding: 5px 0px 5px 5px;
margin: 10 px;
}
En Internet Explorer me flota a la derecha, que es lo que yo buscaba, pero en Mozilla y en Chrome no. Alguna pista?
Gracias