Tema: Div "flotante" al lado de un div contenedor
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/11/2010, 17:04
Avatar de Jask
Jask
 
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 18 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. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <title>Autoescuela Ronda</title>
  6.  
  7. </head>
  8. <body>
  9.  
  10. <div class="dt main_t" style="border:1px solid #2f2f2f;">
  11.     <div class="header top_l">
  12.     </div>
  13. <div class="dt mpct">
  14.         <div class="dr">
  15.             <div class="dc" style="width:501px">
  16.                 <div style="margin:0px 0px 0px 21px;">
  17.                   <script type="text/javascript">
  18. 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
  19. </script>
  20.  
  21.                   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="191" id="FlashID2" title="menu2">
  22.                     <param name="movie" value="flash/header2_v7.swf">
  23.                     <param name="quality" value="high">
  24.                     <param name="wmode" value="opaque">
  25.                     <param name="swfversion" value="8.0.35.0">
  26.                     <!-- 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. -->
  27.                     <param name="expressinstall" value="Scripts/expressInstall.swf">
  28.                     <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
  29.                     <!--[if !IE]>-->
  30.                     <object type="application/x-shockwave-flash" data="flash/header2_v7.swf" width="480" height="191">
  31.                       <!--<![endif]-->
  32.                       <param name="quality" value="high">
  33.                       <param name="wmode" value="opaque">
  34.                       <param name="swfversion" value="8.0.35.0">
  35.                       <param name="expressinstall" value="Scripts/expressInstall.swf">
  36.                       <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
  37.                       <div>
  38.                         <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
  39.                         <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>
  40.                       </div>
  41.                       <!--[if !IE]>-->
  42.                     </object>
  43.                     <!--<![endif]-->
  44.                   </object>
  45.                 </div>
  46.           </div>
  47.             <div class="dc" style="width:265px">
  48.                 <div class="anuncio">
  49.                     <ul class="gallery clearfix">
  50.                         <li>
  51.                             <a href="http://www.youtube.com/watch?v=UxuEl8qkErs" rel="prettyPhoto">
  52.                                 <img src="contenido/imagenes/youtube.jpg" alt="Video Promocional" rel="fancyvideo">
  53.                             </a>
  54.                         </li>
  55.                     </ul>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     <div class="logos">
  61.     
  62.         <div style="position:absolute; top:20px; left:20%">
  63.             <table border="1" width="67">
  64.                 <tr>
  65.                     <td width="57">A</td>
  66.                 </tr>
  67.                 <tr>
  68.                     <td>B</td>
  69.                 </tr>
  70.                 <tr>
  71.                     <td>C</td>
  72.                 </tr>
  73.                 <tr>
  74.                     <td>D</td>
  75.                 </tr>
  76.                 <tr>
  77.                     <td>E</td>
  78.                 </tr>
  79.                 <tr>
  80.                     <td></td>
  81.                 </tr>
  82.             </table>
  83.         </div>
  84.     
  85.     <img src="images/all-logos.jpg">
  86.     </div>
  87.     <div class="dr">
  88.         <div class="dc">
  89.             
  90.         </div>
  91.     </div>
  92.     <div class="dr"><div class="dc"><img src="images/spacer.gif" width="1" height="15" alt="" /><br /></div></div>
  93.     
  94. </div>
  95. <div class="dt">
  96.     <div class="dr">
  97.         <div class="dc" style="height:63px; background:url(images/fbg_yellow.jpg) 0 0 repeat-x">
  98.             <div class="dt" style="width:766px">
  99.                 <div class="dr">
  100.                     Autoescuela Ronda <?php echo date('Y'); ?>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </div>
  106. </div>
  107.  
  108. </body>
  109. </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 :) ?