Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nill Rck

Redimensionar div com o espaço restante

Por , em Desenvolvimento frontend

Recommended Posts

Nill Rck    0

Nill Rck
Postado

Estou tentando fazer uma página com 3 Divs , sendo que uma ficara na esquerda com 150px; outra com 200px na direita, e uma terceira no centro ocupando o restante do espaço disponível , mas nao esta funcionado.oque eu preciso fazer ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

depende, como vc fez ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nill Rck    0

Nill Rck
Postado

HTML

<body>
	<section id="wrap">
    	<header>
        	<div id="topo"></div><!--/topo-->
        </header>
        
    	<div id="colunaEsquerda">
        	MENUS
        </div><!--/colunaesquerda-->
            <aside>
            	DETALHES
            </aside><!--aside-->
    	<div id="colunaCentro">
        	CENTRO
        </div><!--/colunaCentro-->
        
    </section><!--/wrap-->

</body>

CSS

 

#wrap{
	width:100%;
	height:100%;
	float:left;
}
/*TOPO*/
header{
	width:100%;
	height:auto;
	background:#000;
}
#topo{
	width:100%;
	height:70px;
	background:#333;
	margin:auto;
}
/*coluna esquerda*/
#colunaEsquerda{
	width:150px;
	height:905px;
	float:left;
	background:#EEE;
}
/*coluna Centro*/
#colunaCentro{
	width:70%;
	height:900px;
	background:#CC9;
	margin-left:150px;
}
aside{
	width:300px;
	min-width:200px;
	height:500px;
	float:right;
	background:#3C9
}


depende, como vc fez ?

 

o código ta ai >

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

* { margin: 0; padding: 0; }

 

p { margin-bottom: 10px; }

header {

background:#000;

}

#header {

height:70px;

background:#333;

}

#menu {

width:150px;

float:left;

background:#EEE;

}

#all {

background:#CC9;

}

#aside {

width:300px;

float:right;

background:#3C9

}

#menu,

#all,

#aside {

height:900px;

}

#content { padding: 20px 320px 0 170px; }

</style>

</head>

 

<body>

 

<header id="header">

<p>topo</p>

</header><!-- #header -->

 

<section id="all">

<div id="menu">

MENUS

</div><!-- #menu -->

<aside id="aside">

DETALHES

</aside><!-- #aside -->

<article id="content">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dolores, explicabo expedita laboriosam quisquam provident consequuntur quae omnis pariatur suscipit! Quasi, deleniti, veritatis perferendis fugit unde placeat inventore voluptas asperiores.</p>

<p>Ad, illum rerum id molestiae accusamus laboriosam explicabo error labore molestias ratione vel laborum expedita sed ipsam officiis quidem dicta repellat cupiditate sint provident sunt quam inventore quas temporibus modi.</p>

<p>Aspernatur, libero, exercitationem quos velit numquam sint incidunt est delectus adipisci provident illo repudiandae omnis aliquam unde error modi in voluptate saepe officiis blanditiis similique. At est tenetur dolore eligendi.</p>

<p>At, consequatur, vero iure dolore recusandae voluptatem ducimus similique facere quisquam dolorem quos suscipit ea cupiditate rem asperiores quaerat delectus! Quisquam, iusto dignissimos laborum ratione repellendus delectus cum ad vel.</p>

<p>Officia, perferendis, quas est molestias exercitationem laudantium excepturi animi inventore placeat iusto accusamus minima delectus minus sed rem dignissimos adipisci vel laborum quo sit ut eos harum incidunt fuga cupiditate.</p>

<p>Modi, in voluptates veniam dolor omnis adipisci neque quaerat consequatur provident tenetur possimus porro fugiat dicta! Sunt, dolorem quisquam impedit nesciunt suscipit placeat ut nam atque maxime magni quos excepturi!</p>

<p>Consequatur, nostrum, praesentium magnam deserunt commodi quae laboriosam quibusdam iusto repudiandae suscipit ipsum fuga repellendus error itaque consectetur tempora dolorum quia quaerat illo laudantium recusandae asperiores in voluptatem cumque accusantium.</p>

<p>Harum, nobis doloribus debitis vitae quas quos tempora consequatur dolorem enim inventore quae possimus non delectus ad eius eveniet consequuntur nemo autem obcaecati distinctio saepe alias ipsa beatae. Consectetur, atque?</p>

<p>Earum, corporis, debitis facere aspernatur ab quae delectus dolor aliquid suscipit error maiores quos rem pariatur totam numquam temporibus laudantium voluptatem reprehenderit explicabo odio. Velit, possimus saepe perspiciatis blanditiis voluptas?</p>

<p>Maxime, beatae, pariatur qui dignissimos amet debitis aut nam error harum assumenda placeat laudantium. Iste, corrupti maxime distinctio doloremque excepturi nulla quibusdam voluptate esse odio labore animi recusandae aliquam possimus.</p>

</article><!-- #content -->

 

</section><!-- #all -->

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito