Ayuda con diseño web para divs y tamaños dinámicos

RobertoP2012 · 28 Ene 2014

Hola a todos! Esta vez vengo a pedir ayuda sobre un problema que no logro solucionar de diseño web..

Primero muestro una imagen de lo que quiero:

Html:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
	<head>
		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<header>
		</header>

		<div id="content">
			<div id="left">
			</div>

			<div id="middle">
			</div>

			<div id="right">
			</div>
		</div>

		<div style="clear: both;"></div> <!-- Clear the float -->
		
		<footer>
		</footer>
	</body>
</html>

Css:

Insertar CODE, HTML o PHP:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{vertical-align: baseline border: 0; outline: 0;
                font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}
*               {margin: 0; padding: 0}
body            {line-height: 1; height:100%}
:focus          {outline: 0}
ol, ul          {list-style: none}
table           {border-collapse: collapse; border-spacing: 0;}
blockquote, q   {quotes: "" ""}
hr              {border: 0; color: #000; background-color: #000; height:1px}
blockquote:before, blockquote:after, q:before, q:after {content: ""}

body{
	padding: 0;
	margin: 0;
}

header{
	width: 100%;
	height: 40px;
	background: green;
}

footer{
	width: 100%;
	height: 200px;
	background: red;
}

#content{
	width: auto;
}

#left{
	width: 200px;
	height: 500px;
	float: left;
	background: yellow;
}

#right{
	width: 200px;
	height: 500px;
	float: right;
	background: orange;
}

#middle{
	width: 100%;
	height: 500px;
	background: skyblue;
}

Muchas gracias!!

krusty72 · 28 Ene 2014

Los 3 divs deben llevar el float:left;

Al azul redúcele el tamaño al menos lo que es el ancho del naranja.

El azul (middle) le estás dando un ancho de 100%, eso hace que tome todo lo que sobra del ancho, por eso el naranja ya no cabe.

Acostúmbrate a usar todo parejo, o usas px o usas %.

Si usas porcentajes % debería quedar así por ejemplo:

amarilo width:20%
azul width 60%
naranja width 20%

Que hacen en total el 100%

sanmen1593 · 28 Ene 2014

¿Probaste poniendole un float left a middle?

RobertoP2012 · 28 Ene 2014

krusty72 dijo:
Los 3 divs deben llevar el float:left;

Al azul redúcele el tamaño al menos lo que es el ancho del naranja.

El azul (middle) le estás dando un ancho de 100%, eso hace que tome todo lo que sobra del ancho, por eso el naranja ya no cabe.

Acostúmbrate a usar todo parejo, o usas px o usas %.

Si usas porcentajes % debería quedar así por ejemplo:

amarilo width:20%
azul width 60%
naranja width 20%

Que hacen en total el 100%

Gracias Krusty, pero yo lo que quiero es que las columnas laterales tengan un mínimo de 200px, y lo azul se ajuste a lo que quede si hago por ejemplo 10%, 80% y 10% usando min-width tampoco funciona porque la azul siempre queda un poco mas grande..

xLincex · 28 Ene 2014

Borras todo el codigo middle:

#middle{
width: 100%;
height: 500px;
background: skyblue;
}

y al content le aumentas esto :

#content{
width: auto;
height: 500px;
background: skyblue;
}

RobertoP2012 · 28 Ene 2014

sanmen1593 dijo:
¿Probaste poniendole un float left a middle?

Gracias Sanmen, pero no funciona, queda igual..

krusty72 · 28 Ene 2014

El problema es que al asignarle 100% al middle, siempre mandará abajo al naranja.

Como dice [MENTION=76637]xLincex[/MENTION] dale width: auto; pero al middle, no al content.

RobertoP2012 · 28 Ene 2014

Muchas gracias a todos, logre hacerlo con tablas! Gracias!

maquinita · 4 Feb 2014

Pon <div id="right"> </div> dentro del midle

Josepdal · 13 Feb 2014

Yo la haría con porcentajes, podría 20% lados y 60 en el centro, más o menos. Así sería elástico y quedaría bien en todas las pantallas de diferente resolución.

jonpirastis · 14 Feb 2014

Como alguno ha comentado antes, yo tenderia a crear cada div con %, es decir, si tu content total, es decir, el div general es un 100%, mete todos los div que hagas dentro de este div general, y luego ponle a cada la division lo que quieras de ese 100%, por ejemplo 20% 60% y 20%...yo nunca le doy pixeles porque la web que tengas se va a a ver en todo tipo de tamaños de pantallas, y con los %, tu diseño se va a amoldar a todo tipo de pantallas....te dejo un ejmplo

<div id="content">
<div id="left">
</div>

<div id="middle">
</div>

<div id="right">
</div>
</div>

****

el CSS seria

#content{
width: 100%;
}

#right{
width: 10%;
}

#middle{
width: 80%;
}

#left{
width: 10%;
}

yockerzard · 3 Mar 2014

.amarillo, .azul, .naranja{
vertical-align: top;
display: inline-block;
margin: 0;
padding: 0;
}

.amarillo {
width: 20%;
}

.naranja{
width: 70%;
}

.azul{
width: 10%;
}

Y olvídate del <div style="clear: both;"></div>