Div "flotante" al lado de un div contenedor

Jask · #1 (**permalink**) 04/11/2010, 17:04

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Autoescuela Ronda</title>
 
</head>
<body>
 
<div class="dt main_t" style="border:1px solid #2f2f2f;">
    <div class="header top_l">
    </div>
<div class="dt mpct">
        <div class="dr">
            <div class="dc" style="width:501px">
                <div style="margin:0px 0px 0px 21px;">
                  <script type="text/javascript">
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
</script>
 
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="191" id="FlashID2" title="menu2">
                    <param name="movie" value="flash/header2_v7.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="opaque">
                    <param name="swfversion" value="8.0.35.0">
                    <!-- 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. -->
                    <param name="expressinstall" value="Scripts/expressInstall.swf">
                    <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="flash/header2_v7.swf" width="480" height="191">
                      <!--<![endif]-->
                      <param name="quality" value="high">
                      <param name="wmode" value="opaque">
                      <param name="swfversion" value="8.0.35.0">
                      <param name="expressinstall" value="Scripts/expressInstall.swf">
                      <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
                      <div>
                        <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
                        <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>
                      </div>
                      <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                  </object>
                </div>
          </div>
            <div class="dc" style="width:265px">
                <div class="anuncio">
                    <ul class="gallery clearfix">
                        <li>
                            <a href="http://www.youtube.com/watch?v=UxuEl8qkErs" rel="prettyPhoto">
                                <img src="contenido/imagenes/youtube.jpg" alt="Video Promocional" rel="fancyvideo">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="logos">
    
        <div style="position:absolute; top:20px; left:20%">
            <table border="1" width="67">
                <tr>
                    <td width="57">A</td>
                </tr>
                <tr>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                </tr>
                <tr>
                    <td>D</td>
                </tr>
                <tr>
                    <td>E</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    
    <img src="images/all-logos.jpg">
    </div>
    <div class="dr">
        <div class="dc">
            
        </div>
    </div>
    <div class="dr"><div class="dc"><img src="images/spacer.gif" width="1" height="15" alt="" /><br /></div></div>
    
</div>
<div class="dt">
    <div class="dr">
        <div class="dc" style="height:63px; background:url(images/fbg_yellow.jpg) 0 0 repeat-x">
            <div class="dt" style="width:766px">
                <div class="dr">
                    Autoescuela Ronda <?php echo date('Y'); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
</body>
</html>

CSS

Código CSS:

Ver original* {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
body {
    /*background:url(images/bg.jpg);*/
    background:url(images/bg_yellow.jpg);
}
a {
    color:#cd2800
}
a:hover {
    text-decoration:none;
}
 
table{
    font:normal 12px Arial, Helvetica, sans-serif;
}
 
img {
    border:0px;
}
input {
    vertical-align:middle;
    padding:0px 0px 0px 4px;
}
.dt {
    width:766px;
    margin:0 auto;
 
}
.dr {
    display:table-row;
    width:100%;
}
 
.pie{
    margin-left:5px;
}
 
.dc {
    display:table-cell;
    text-align:left;
    vertical-align:top;/*width:100%; */
}
 
    .cd_contacto{
        display:block;
    }
    
.main_text, input, textarea, body, select {
    font:normal 11px Arial, Helvetica, sans-serif;
    line-height:15px;
    color:#000;
}
font {
    font:normal 13px Tahoma, Arial;
    color:#D12C00;
}
.input, .ta {
    border:1px solid #999;
    width:211px;
}
.input {
    height:20px;
}
.ta {
    height:80px;
    overflow:auto;
    padding:2px 0px 0px 5px;
}
b {
    color:#d92b00;
    font-size:14px
}
b a {
    color:#390
}
b h1 {
    color:#d92b00;
}
font {
    font:bold 11px Arial, Helvetica, sans-serif;
    color:#5486a9
}
.nn a {
    text-decoration:none
}
.nn a:hover {
    text-decoration:underline
}
ul {
    list-style:none
}
.main {
    width:100%;
    background:url(images/tal.jpg) top left repeat-x #FFF;
}
.main_t {
    background:#fafaf0;
}
.x {
    margin:0px 46px 0px 49px;
    width:671px;
}
 
.dc_contacto H2{
    color:#d92b00;
}
 
/*••••••••••••••HEADER•••••••••••••*/
.header {
    height:139px;
    background:url(images/hbg.jpg) 0 0 no-repeat;
}
.top_l {
    background:url(images/top.jpg) 0 0 repeat-x;
}
.top {
    height:63px;
}
.menu {
    height:76px;
}
.umenu {
    width:288px;
    height:20px;
    background:url(images/g.jpg) 0 0 no-repeat;
    font:normal 10px Arial, Helvetica, sans-serif;
    color:#FFF;
    margin:0px 0px 0px 22px;
}
.umenu2 {
    width:144px;
    height:20px;
    background:url(images/g2.jpg) 0 0 no-repeat;
    font:normal 10px Arial, Helvetica, sans-serif;
    color:#FFF;
}
.mpct {
    width:766px;
    height:191px;
    background:url(images/mpct.jpg) 0 0 no-repeat
}
.block {
    margin:0px 0px 0px 521px;
    width:200px;
}
.block b {
    color:#5486a9;
}
#pie {
    position:relative;
    left: -20px;
}
.admin {
    margin:0 auto;
    width:750px;
    /* Hack para IE * */
    *margin:0 auto 0 auto;
 *width:750px;
 *text-align:left;
    height: 200px;
}
.caja_admin {
    border:dotted 1px #7b7b75;
    text-align: center;
    background-color:#eeeee4;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#e47760;
}
/*••••••••••••••CONTENT•••••••••••••*/
.mrg {
    margin:0px 0px 0px 8px;
    width:720px;
}
.cont {
    width:735px;
    margin:0px 0px 0px 14px;
    background:url(images/cont_bg.jpg) 0 0 repeat-x
}
.cb {
    margin:0px 0px 0px 20px;
    width:200px;
}
 
li {
    list-style:none;
    line-height:10px;
    padding:5px 0px 3px 0px;
}
 
.flecha li a {
    padding:0px 0px 0px 17px;
    color:#000;
    background:url(images/0blt1.jpg) 0 0 no-repeat;
    font:bold 11px Arial, Helvetica, sans-serif;
 
}
.l {
    background:url(images/l.gif) top right repeat-y
}
.r {
    background:url(images/l.gif) 0 0 repeat-y
}
.rdmr {
    color:#cb2700;
    font:bold 10px Tahoma, Arial;
    background:url(images/0blt1.jpg) 0 0 no-repeat;
    padding:0px 0px 0px 10px;
    text-transform:uppercase;
}
.ftr {
    color:#c0c0c0;
}
.ftr a {
    color:#c0c0c0;
}
.ftr1 {
    color:#9a9a9a;
}
.ftr1 a {
    color:#9a9a9a;
}
 
.anuncio{
    margin:27px 30px 0px 10px; 
}
 
    .anuncio img{
        border:none;
    }
    
/* jQuery youtube */
 
.wide {
    border-bottom: 1px #000 solid;
    width: 4000px;
}

Gracias =) !!

Un saludo !!

masterojitos · #2 (**permalink**) 04/11/2010, 17:10

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<div class="dt main_t" style="border:1px solid #2f2f2f; position:relative;">
    <div style="position:absolute; top:0; left:0">
    ......
    </div>
......
</div>

Suerte

Jask · #3 (**permalink**) 05/11/2010, 10:52

Perfecto. Me funcionó 100% muchas gracias fiera :) !!