Blog:
http://www.todohit.net/web/
Como pueden ver, quiero que el cuadro donde esta facebook y twitter quede pegado arriba, y el cuadro para suscribirse al feedburner quede pegado a la derecha..
Pero no se porque me queda de esta manera.
Aqui el codigo que tengo:
Código HTML:
<div id="identification">
<div class="search2">
<h3 style="color:#000;font-weight:bold;">Buscador</h3>
<ul>
<form action="" method="post" id="searchform">
<li>
<input type="text" value="Qué Disco Buscas?" name="s" onblur="if(this.value == '') { this.value = 'Qué Disco Buscas?'; }" onfocus="if(this.value == 'Qué Disco Buscas?') { this.value = ''; }" class="txtfield" />
</li>
<li style="float:right;"><input type="submit" class="go" value="" /></li>
</form>
</ul>
</div>
<br /><br /><br /><br />
<div class="feedburner2">
<h5>Recibe Todos los Discos por Correo Electronico</h5>
<div class="iconorss"></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TodoHit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="over">
<input type="text" name="email" value="Escribe tu E-mail..." size="30" onfocus="if (this.value == 'Escribe tu E-mail...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Escribe tu E-mail...';}" class="text" />
<input type="hidden" value="TodoHit" name="uri"/>
<input type="hidden" name="loc" value="es_ES"/>
<input type="submit" value="Suscríbete" id="send" class="suscribete" />
</form>
</div>
<div class="fb-inicio">
<fb:like-box href="http://www.facebook.com/TodoHit" show_faces="false" stream="false" header="false"></fb:like-box></div>
<div class="tw-inicio">
<a href="https://twitter.com/TodoHit" class="twitter-follow-button" data-show-count="true" data-lang="es" data-size="large">Segui @TodoHit</a></div>
</div>
Código:
/* Buscador -------------------------------------------------------- */
.search2{
float:right;
}
.search2 h3{
float:left;
text-transform:uppercase;
padding:6px 10px 0px 0px;
}
.search2 ul{
float:right;
list-style:none;
width:238px;
height:32px;
padding:4px 4px 0 4px;
background:url(../img/search.png) no-repeat;
}
.search2 ul li{
float:left;
}
.search2 ul li input.txtfield{
float:left;
width:180px;
height:28px;
line-height:28px;
padding:0px 10px 0px 10px;
font-size:12px;
color:#798e94;
background:transparent;
border:none;
}
.search2 ul li input.go{
float:right;
width:32px;
height:28px;
border:#FFF solid 1px;
border-radius:0px 2px 2px 0px;
background-image:url(../img/mag.png);
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
background-color:#af0101;
}
/* Inicio> Recibe Todos los Discos por Correo Electrónico -------------------------------------------------------- */
.feedburner2 {
background-color: #fe7c00;
border: 1px solid #DDDDDD;
padding: 5px;
width:301px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float:right;
}
.iconorss {
background:url(../img/rss_icon.png) no-repeat;
margin-right:5px;
float:left;
width:29px;
height:30px;
}
.feedburner2 h5 {
font-size: 1em;
padding: 0 0 5px 0;
color:#000;
}
.feedburner2 input.text {
float: left;
width: 170px;
padding: 6px;
border: 1px solid #ddd;
font: normal 12px Helvetica, Arial, Verdana, Sans-serif;
}
.feedburner2 .suscribete {
padding: 3px;
margin: 0 0 0 5px;
}
/* Inicio> Facebook y Twitter -------------------------------------------------------- */
.fb-inicio {
padding:5px;
background-color:#e7ebf2;
width:244px;
border:1px solid #DDDDDD;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
border-top-right-radius:5px;
}
.tw-inicio {
margin-top:1px;
padding:5px 5px 3px 5px;
background-color:#c8e2ef;
width:244px;
border:1px solid #DDDDDD;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
border-bottom-right-radius:5px;
}
Me falta algun codigo para poner alinear todo?
Espero que me ayuden!