Ir para conteúdo

POWERED BY:

Arquivado

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

William Phantom

Fazer duas divs terminar iguais

Por , em Desenvolvimento frontend

Recommended Posts

William Phantom    32

William Phantom
Postado

Olá pessoal primeira vez minha na area do css.

 

Tenho dois problemas:

 

1º

eu tenho duas divs: content_content e content_sidebar,

e eu queria que elas terminasem juntas tipo quando uma fosse maior que a outra, ela ficasse maior

 

2º

e o outro problema é que eu queria que a div content_sidebar tivesse 300px de largura e a content_content ficassem com o resto da tela

 

Obs: o site que estou fazendo é full screen, ou seja ele toma a tela toda

 

HTML

<!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>
<link href="styles/global.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GODs</title>
</head>

<body>

<div id="global">

   <div id="header">
   	<div id="header_menu">
       	<ul class="header_menu">
           	<a href="#"><li class="menu_option" title="Voltar para página inícial"><img src="images/home.png" width="32"/>Home</li></a>
               <a href="#"><li class="menu_option" title="Veja a lista de Mangás"><img src="images/list.png" width="32"/>Mangás</li></a>
               <a href="#"><li class="menu_option" title="Envie um mangá e mostre para os seus amigos!"><img src="images/upload.png" width="32"/>Enviar</li></a>
               <a href="#"><li class="menu_option" title="Faça login"><img src="images/account.png" width="32"/>Acesso</li></a>
           </ul>
       </div>
   </div><!-- FIM DA HEADER -->


   <div id="body">

   	<div id="banners">
       	<ul id="loop_banner">
           	<li class="img_banner"><img src="uploads/banner/01-fairytail.png"/><span class="des_banner"></span></li>
               <li class="img_banner"><img src="uploads/banner/02-.png" /><span class="des_banner"></span></li>
           </ul>
       </div><!-- FIM DO BANNERS -->


       <div class="content">
       	<div id="content_content">
           	<div class="post_box">
               	<div class="post_title"><span>Ultimos Lancamentos:</span></div>
                   <div class="post_content">
                   	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                       Nam ullamcorper faucibus interdum. Quisque ultrices nulla eu velit pulvinar id ultrices nisi lobortis.
                        Quisque eget lacus vitae ipsum egestas hendrerit. Cras tincidunt, est auctor pulvinar ornare, metus leo lobortis nulla, in porttitor nunc nisl ac orci. Praesent id nunc sed eros vulputate auctor. Praesent congue arcu quis tortor consectetur hendrerit. Etiam a mauris lacus, vitae laoreet justo. Vivamus justo dui, varius sit amet ultricies ut, semper nec libero. Nulla gravida risus commodo tortor pretium molestie. Sed
                         tincidunt diam
                         ac lorem mollis a gravida eros facilisis. Aenean ut elit urna. Cras ac rhoncus quam. In sed scelerisque magna. Nulla convallis ultrices faucibus. 

Sed at vulputate dolor. Curabitur urna
e platea dictumst. Ut vel sapien ut tortor viverra commodo. Cura
bitur ac dui nisl, non fermentum augue. Sed aliquam, ante quis s
ollicitudin luctus, orci sapien elementum ante, vitae iaculis velit risus id arcu. Quisque sit amet justo in mi accumsan congue eu id dolor. Aliquam vitae lobortis tellus.</p>
                   </div>
               </div>
           </div><!-- FIM DO CONTENT_CONTENT -->

           <div id="content_sidebar">
           	<div class="sidebar_box">
               	<div class="sidebar_title">Principal</div>
                   <div class="sidebar_content">
                   	<ul>
                       	<li><a href="#">Início</a></li>
                           <li><a href="#">Mangas</a></li>
                           <li><a href="#">Upload</a></li>
                           <li><a href="#">Login</a></li>
                           <li><a href="#">Registro</a></li>
                           <li><a href="#">Fórum</a></li>
                       </ul>
                   </div>
               </div>

               <div class="sidebar_box">
               	<div class="sidebar_title">Membro</div>
                   <div class="sidebar_content">Login</div>
               </div>
           </div><!-- FIM DO SIDEBAR -->
       </div><!-- FIM DO CONTENT -->

   </div><!-- FIM DA BODY -->


   <div id="footer">
   	<span class="alright">©2012 - Todos direitos reservados aos seus respectivos donos.</span>
   </div><!-- FIM DA FOOTER -->

</div><!-- FIM DA GLOBAL -->



</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body{
margin:0px auto;
padding:0px;
font:"Trebuchet MS", Arial, Helvetica, sans-serif 15px;}

#global {
background:url(../images/bg.png);}
#header, #body, #footer {
overflow:hidden;
width:100%;}
#header {
background:url(../images/bg3.png);}
#body {}
#footer {
color:#FFF;
font-size:20px;
height:150px;
background:#333;
padding:auto;
text-align:center;
padding:10px 0px;}

#content_content {
float:left;
width:75%;
height:100%;}
#content_sidebar {
width:25%;
float:right;
background:url(../images/bg_body2.png);
height:auto;}

/**/#banners {
height:300px;
overflow:hidden;
background:url(../images/bg_banner.png);
padding:0px auto;}
#loop_banner{
width:900px;
height:300px;
overflow:hidden;
margin:0px auto;
list-style:none;}
.img_banner {
background:#FFF;}
#header_menu {
float:right;}
.header_menu {
list-style:none;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;}
.menu_option {
float:left;
color:#FFF;
padding:0px 10px 10px;}
.menu_option img {
float:left;
margin:0px 5px;}
.post_box, .sidebar_box {
padding:15px 10px;}
.post_title, .sidebar_title {
font-size:20px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Júlio Santos    3

Júlio Santos
Postado

Cara pro primeiro caso, das duas colunas terminarem iguais, procure e se informe sobre faux columns. Tem muitos artigos por aí, aqui mesmo no fórum deve ter.

 

No segundo basta você definir a largura (width) do content_sidebar. Creio que não definindo a largura da outra ela já vai ficar ocupando o restante da largura.

 

Qualquer dúvida posta aí.

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