quiero poner dos divs en una sola linea

mando11 · #1 (**permalink**) 14/07/2012, 22:03

que tal, tengo un problema con mi plantilla html/css, deseo que el menu de mi pagina, este alineado con mi logotipo como se puede apreciar en esta imagen,que en el header este mi logo y tambien mi menu "nav bar"

No eh podido ponerlos alineados aquí les paso mi codigo.

<head>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
margin:0px
}
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #000;
background-image: url(cmmakeup.jpg);
text-align: left;
padding: 0px;
height: auto;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#main {
}
a:link {
font-weight: bold;
color: #000;
}
#container #Header #logo #mk-logo {
background-image: url(logomkhead.png);
text-indent: -9999px;
display: block;
height: 95px;
width: 324px;
margin-right: 0px;
margin-left: 0px;
}
#container #Header #navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
font-weight: bold;
color: #000;
text-align: center;
height: 35px;
}
#container #Header #banner {
text-align: center;
height: 128px;
}
a:visited {
font-weight: bold;
color: #000;
}
a:hover {
font-weight: bold;
color: #0F0;
}
#Header {
background-image: url(cmmakeup.jpg);
padding: 0px;
height: 272px;
margin-right: auto;
margin-left: auto;
}
#main {
text-decoration: blink;
background-image: url(cmmakeup.jpg);
padding: 0px;
margin-top: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
height: auto;
min-height: 305;
}
#container #Header #navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
font-weight: bold;
color: #000;
text-align: right;
height: 35px;
position: fixed;
white-space: normal;
vertical-align: 0%;
}
#container #Header #navbar ul {
margin: 0px;
padding-top: 12px;
list-style-type: none;
}
#container #Header #navbar ul li {
display: inline;
text-transform: uppercase;
background-image: url(images/navwidgetwhite.png);
background-repeat: no-repeat;
background-position: center 0px;
margin: 0px;
height: 35px;
padding-top: 11px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(cmmakeup.jpg);
height: 100px;
padding-top: 20px;
position: relative;
}
#container #Header #logo {
height: 110px;
}
#container #Header #navbar ul li a {
text-decoration: none;
}
#container #navbar ul li a:link {
color: #7ac1b7;
text-decoration: none;
}
#container #navbar ul li a:visited {
color: #7ac1b7;
text-decoration: none;
}
#container #navbar ul li a:hover {
color: #9e2520;
text-decoration: none;
background-image: url(images/navwidget.png);
background-repeat: no-repeat;
background-position: center 0px;
margin: 0px;
height: 35px;
padding-top: 11px;
padding-bottom: 0px;
}
</style>
<Head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="faviconmk.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mk Portafolio</title>
</head>

<body>
<div id="container">
<div id="Header">

<div id="logo"><a href="www.juareztve.com" title="foto" target="_blank" id="mk-logo">mk logo</a>

</div>


<div id="banner">
<div id="navbar">

<ul>
<li><a href="index.html" title="home" target="_self">Home</a></li>
<li><a href="about.html" title="About" target="_self">About</a></li>
<li><a href="trabajos.html" title="Trabajos" target="_self">Trabajos</a></li>
<li><a href="Contacto.html" title="Contacto" target="_self">Contacto</a></li>
</ul>
</div>
</div>

</div>
<div id="main">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>

<div id="footer">
<div id="footnav">
</div>
<div id="contact">
</div>
<div id="network">
</div>
</div>
</div>

</body>
</html>

así es como lo tengo actualmente.

emprear · #2 (**permalink**) 15/07/2012, 12:09

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body, div{
margin: 0;
padding: 0;
border: none;
}
 
.logo{
float: left;
width: 25%;
background: lime;
}
.menunav{
float: left;
background: red;
width: 75%;
}
 
.logo2{
display: inline-block;
width: 25%;
background: cyan;
height: 100px;
}
.menunav2{
display: inline-block;
background: orange;
width: 75%;
height: 100px;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="logo">logo</div><div class="menunav">menu</div>
<div style="clear:both"><!-- clear --></div>
<div>resto del contenido</div>
 
<!-- otra variante -->
 
<div class="logo2">logo2</div><div class="menunav2">menu2</div>
<div>resto del contenido2</div>
 
</body>
</html>

Saludos

memoadian · #3 (**permalink**) 15/07/2012, 19:35

pon un ancho fijo, a cada div o bien la propiedad float, para que tomen el ancho de su contenido.

C2am · #4 (**permalink**) 15/07/2012, 22:55

Cita:

Iniciado por memoadian

pon un ancho fijo, a cada div o bien la propiedad float, para que tomen el ancho de su contenido.

memoadian si le pone un ancho fijo solamente, los div igual se pondrían uno debajo del otro, y esto se debe a que se trata de elemento de bloque. Para que queden uno al lado del otro, o en una sola linea como dice el título, lo que se debe hacer es cambiar el comportamiento de los div involucrados. Es decir que se comporten como elementos de linea:

Código CSS:

Ver originaldiv{display:inline;}

Código CSS:

Ver originaldiv{display:inline-block;}

o flotar los div tal como has dicho.
Pero esto no implica que sea para que tomen el ancho de su contenido, por ejemplo aplicando float sin fijar el ancho hace que tome el 100% del espacio disponible.

En consecuencia, y disculpa mi atrevimiento, no es muy precisa tu respuesta.
Si estoy equivocado desde ya me disculpo, pero creo que no es correcto, o mejor dicho no es muy claro lo que propones.

Saludos

emprear · #5 (**permalink**) 15/07/2012, 23:34

@memoadian
@C2am

Con probar los ejemplos se despejan las dudas
(dejo 2 variantes en un solo archivo. es el código que expuse previamente)

http://foros.emprear.com/css/divs_en_linea.html

SAludos

memoadian · #6 (**permalink**) 15/07/2012, 23:38

@C2am En cierto modo los dos estamos quivocados.

es cierto que colocando un ancho no se pondrán en la misma linea los divs, pero si pones float si que toman el ancho de su contenido y se colocan en la misma linea.

Código CSS:

Ver original<style type="text/css">
    div{
        float:left;
    }
</style>
<div class="left">Hola</div>
<div class="adios">Adios</div>

prueba este sencillo código en tu navegador favorito, que respete estandares ;)

C2am · #7 (**permalink**) 16/07/2012, 00:21

Es posible memoadian, pero yo lo que dije, o quise decir, es que para que se coloquen uno al lado del otro es necesario cambiar el comportamiento por defecto, ya sea con display o con float.
Pero, y el motivo por el cual hice la observación sobre lo que publicaste, es que tienes un "o", en vez de un "y", es decir, y tal como corriges muy bien ahora: fijas un ancho y aplicas float.

Todo esto por una letra, jajaja. Pero ya sabes que en programación "y" y "o", al igual que en la teoría de conjuntos implican una gran gran diferencia.

En realidad mi observación es para que no quede mal entendido el tema, solo eso.

emprear: en realidad mi intención tal como dije antes, solo era aportar en claridad. Y mando11, si es que vuelve debería estar más que complacido con tu respuesta.

Saludos a ambos.

memoadian · #8 (**permalink**) 16/07/2012, 00:28

Así es de hecho en mi oración aparece una "ó" en lugar de una "y" jeje por decirlo así. pero de todos modos fue algo equivocado de mi parte.

Cita:

Pero esto no implica que sea para que tomen el ancho de su contenido, por ejemplo aplicando float sin fijar el ancho hace que tome el 100% del espacio disponible.

yo me equivoque pero tú igual al decir que con float toma el 100% del ancho disponible.

errores, todos somos humanos.

C2am · #9 (**permalink**) 16/07/2012, 00:42

Cuando tienes razón tienes razón memoadian.

Saludos