Foros del Web » Creando para Internet » CSS »

Div "flotante" al lado de un div contenedor

Estas en el tema de Div "flotante" al lado de un div contenedor en el foro de CSS en Foros del Web. Muy buenas :) Por necesidades de esta vida jaja me veo obligado a poner un div con un par de logos justo a la izquierda ...
  #1 (permalink)  
Antiguo 04/11/2010, 18:04
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Mensaje Div "flotante" al lado de un div contenedor

Muy buenas :)

Por necesidades de esta vida jaja me veo obligado a poner un div con un par de logos justo a la izquierda o derecha, para el caso da igual, un div flotante, pero no sabría como hacerlo para que se vaya ajustando a diferentes pantallas.

Dejo screen para que lo entiendan:



Sabrían como podría hacerlo ?

os dejo el código del index y el css.

Index
Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <title>Autoescuela Ronda</title>
  4.  
  5. </head>
  6.  
  7. <div class="dt main_t" style="border:1px solid #2f2f2f;">
  8.     <div class="header top_l">
  9.     </div>
  10. <div class="dt mpct">
  11.         <div class="dr">
  12.             <div class="dc" style="width:501px">
  13.                 <div style="margin:0px 0px 0px 21px;">
  14.                   <script type="text/javascript">
  15. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','480','height','191','title','Menu','src','flash/header2_v7','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/header2_v7' ); //end AC code
  16.  
  17.                   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="191" id="FlashID2" title="menu2">
  18.                     <param name="movie" value="flash/header2_v7.swf">
  19.                     <param name="quality" value="high">
  20.                     <param name="wmode" value="opaque">
  21.                     <param name="swfversion" value="8.0.35.0">
  22.                     <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
  23.                     <param name="expressinstall" value="Scripts/expressInstall.swf">
  24.                     <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
  25.                     <!--[if !IE]>-->
  26.                     <object type="application/x-shockwave-flash" data="flash/header2_v7.swf" width="480" height="191">
  27.                       <!--<![endif]-->
  28.                       <param name="quality" value="high">
  29.                       <param name="wmode" value="opaque">
  30.                       <param name="swfversion" value="8.0.35.0">
  31.                       <param name="expressinstall" value="Scripts/expressInstall.swf">
  32.                       <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
  33.                       <div>
  34.                         <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
  35.                         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
  36.                       </div>
  37.                       <!--[if !IE]>-->
  38.                     </object>
  39.                     <!--<![endif]-->
  40.                   </object>
  41.                 </div>
  42.           </div>
  43.             <div class="dc" style="width:265px">
  44.                 <div class="anuncio">
  45.                     <ul class="gallery clearfix">
  46.                         <li>
  47.                             <a href="http://www.youtube.com/watch?v=UxuEl8qkErs" rel="prettyPhoto">
  48.                                 <img src="contenido/imagenes/youtube.jpg" alt="Video Promocional" rel="fancyvideo">
  49.                             </a>
  50.                         </li>
  51.                     </ul>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56.     <div class="logos">
  57.    
  58.         <div style="position:absolute; top:20px; left:20%">
  59.             <table border="1" width="67">
  60.                 <tr>
  61.                     <td width="57">A</td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td>B</td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td>C</td>
  68.                 </tr>
  69.                 <tr>
  70.                     <td>D</td>
  71.                 </tr>
  72.                 <tr>
  73.                     <td>E</td>
  74.                 </tr>
  75.                 <tr>
  76.                     <td></td>
  77.                 </tr>
  78.             </table>
  79.         </div>
  80.    
  81.     <img src="images/all-logos.jpg">
  82.     </div>
  83.     <div class="dr">
  84.         <div class="dc">
  85.            
  86.         </div>
  87.     </div>
  88.     <div class="dr"><div class="dc"><img src="images/spacer.gif" width="1" height="15" alt="" /><br /></div></div>
  89.    
  90. </div>
  91. <div class="dt">
  92.     <div class="dr">
  93.         <div class="dc" style="height:63px; background:url(images/fbg_yellow.jpg) 0 0 repeat-x">
  94.             <div class="dt" style="width:766px">
  95.                 <div class="dr">
  96.                     Autoescuela Ronda <?php echo date('Y'); ?>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102. </div>
  103.  
  104. </body>
  105. </html>

CSS
Código CSS:
Ver original
  1. * {
  2.     margin:0px 0px 0px 0px;
  3.     padding:0px 0px 0px 0px;
  4. }
  5. body {
  6.     /*background:url(images/bg.jpg);*/
  7.     background:url(images/bg_yellow.jpg);
  8. }
  9. a {
  10.     color:#cd2800
  11. }
  12. a:hover {
  13.     text-decoration:none;
  14. }
  15.  
  16. table{
  17.     font:normal 12px Arial, Helvetica, sans-serif;
  18. }
  19.  
  20. img {
  21.     border:0px;
  22. }
  23. input {
  24.     vertical-align:middle;
  25.     padding:0px 0px 0px 4px;
  26. }
  27. .dt {
  28.     width:766px;
  29.     margin:0 auto;
  30.  
  31. }
  32. .dr {
  33.     display:table-row;
  34.     width:100%;
  35. }
  36.  
  37. .pie{
  38.     margin-left:5px;
  39. }
  40.  
  41. .dc {
  42.     display:table-cell;
  43.     text-align:left;
  44.     vertical-align:top;/*width:100%; */
  45. }
  46.  
  47.     .cd_contacto{
  48.         display:block;
  49.     }
  50.    
  51. .main_text, input, textarea, body, select {
  52.     font:normal 11px Arial, Helvetica, sans-serif;
  53.     line-height:15px;
  54.     color:#000;
  55. }
  56. font {
  57.     font:normal 13px Tahoma, Arial;
  58.     color:#D12C00;
  59. }
  60. .input, .ta {
  61.     border:1px solid #999;
  62.     width:211px;
  63. }
  64. .input {
  65.     height:20px;
  66. }
  67. .ta {
  68.     height:80px;
  69.     overflow:auto;
  70.     padding:2px 0px 0px 5px;
  71. }
  72. b {
  73.     color:#d92b00;
  74.     font-size:14px
  75. }
  76. b a {
  77.     color:#390
  78. }
  79. b h1 {
  80.     color:#d92b00;
  81. }
  82. font {
  83.     font:bold 11px Arial, Helvetica, sans-serif;
  84.     color:#5486a9
  85. }
  86. .nn a {
  87.     text-decoration:none
  88. }
  89. .nn a:hover {
  90.     text-decoration:underline
  91. }
  92. ul {
  93.     list-style:none
  94. }
  95. .main {
  96.     width:100%;
  97.     background:url(images/tal.jpg) top left repeat-x #FFF;
  98. }
  99. .main_t {
  100.     background:#fafaf0;
  101. }
  102. .x {
  103.     margin:0px 46px 0px 49px;
  104.     width:671px;
  105. }
  106.  
  107. .dc_contacto H2{
  108.     color:#d92b00;
  109. }
  110.  
  111. /*••••••••••••••HEADER•••••••••••••*/
  112. .header {
  113.     height:139px;
  114.     background:url(images/hbg.jpg) 0 0 no-repeat;
  115. }
  116. .top_l {
  117.     background:url(images/top.jpg) 0 0 repeat-x;
  118. }
  119. .top {
  120.     height:63px;
  121. }
  122. .menu {
  123.     height:76px;
  124. }
  125. .umenu {
  126.     width:288px;
  127.     height:20px;
  128.     background:url(images/g.jpg) 0 0 no-repeat;
  129.     font:normal 10px Arial, Helvetica, sans-serif;
  130.     color:#FFF;
  131.     margin:0px 0px 0px 22px;
  132. }
  133. .umenu2 {
  134.     width:144px;
  135.     height:20px;
  136.     background:url(images/g2.jpg) 0 0 no-repeat;
  137.     font:normal 10px Arial, Helvetica, sans-serif;
  138.     color:#FFF;
  139. }
  140. .mpct {
  141.     width:766px;
  142.     height:191px;
  143.     background:url(images/mpct.jpg) 0 0 no-repeat
  144. }
  145. .block {
  146.     margin:0px 0px 0px 521px;
  147.     width:200px;
  148. }
  149. .block b {
  150.     color:#5486a9;
  151. }
  152. #pie {
  153.     position:relative;
  154.     left: -20px;
  155. }
  156. .admin {
  157.     margin:0 auto;
  158.     width:750px;
  159.     /* Hack para IE * */
  160.     *margin:0 auto 0 auto;
  161.  *width:750px;
  162.  *text-align:left;
  163.     height: 200px;
  164. }
  165. .caja_admin {
  166.     border:dotted 1px #7b7b75;
  167.     text-align: center;
  168.     background-color:#eeeee4;
  169.     font-family:Arial, Helvetica, sans-serif;
  170.     font-size:14px;
  171.     color:#e47760;
  172. }
  173. /*••••••••••••••CONTENT•••••••••••••*/
  174. .mrg {
  175.     margin:0px 0px 0px 8px;
  176.     width:720px;
  177. }
  178. .cont {
  179.     width:735px;
  180.     margin:0px 0px 0px 14px;
  181.     background:url(images/cont_bg.jpg) 0 0 repeat-x
  182. }
  183. .cb {
  184.     margin:0px 0px 0px 20px;
  185.     width:200px;
  186. }
  187.  
  188. li {
  189.     list-style:none;
  190.     line-height:10px;
  191.     padding:5px 0px 3px 0px;
  192. }
  193.  
  194. .flecha li a {
  195.     padding:0px 0px 0px 17px;
  196.     color:#000;
  197.     background:url(images/0blt1.jpg) 0 0 no-repeat;
  198.     font:bold 11px Arial, Helvetica, sans-serif;
  199.  
  200. }
  201. .l {
  202.     background:url(images/l.gif) top right repeat-y
  203. }
  204. .r {
  205.     background:url(images/l.gif) 0 0 repeat-y
  206. }
  207. .rdmr {
  208.     color:#cb2700;
  209.     font:bold 10px Tahoma, Arial;
  210.     background:url(images/0blt1.jpg) 0 0 no-repeat;
  211.     padding:0px 0px 0px 10px;
  212.     text-transform:uppercase;
  213. }
  214. .ftr {
  215.     color:#c0c0c0;
  216. }
  217. .ftr a {
  218.     color:#c0c0c0;
  219. }
  220. .ftr1 {
  221.     color:#9a9a9a;
  222. }
  223. .ftr1 a {
  224.     color:#9a9a9a;
  225. }
  226.  
  227. .anuncio{
  228.     margin:27px 30px 0px 10px;
  229. }
  230.  
  231.     .anuncio img{
  232.         border:none;
  233.     }
  234.    
  235. /* jQuery youtube */
  236.  
  237. .wide {
  238.     border-bottom: 1px #000 solid;
  239.     width: 4000px;
  240. }

Gracias =) !!

Un saludo !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 04/11/2010, 18:10
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Div "flotante" al lado de un div contenedor

Cambia el % por px.... es decir, en vez de:
<div style="position:absolute; top:20px; left:20%">
Usa:
<div style="position:absolute; top:20px; left:20px">

Sino, otra forma es poniendo relarivo al div contenidor:
Código HTML:
Ver original
  1. <div class="dt main_t" style="border:1px solid #2f2f2f; position:relative;">
  2.     <div style="position:absolute; top:0; left:0">
  3.     ......
  4.     </div>
  5. ......
  6. </div>

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 05/11/2010, 11:52
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Div "flotante" al lado de un div contenedor

Perfecto. Me funcionó 100% muchas gracias fiera :) !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Etiquetas: contenedor, lado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:07.