Como faço isso no CSS?

Duilio Gomes Pereira · Fevereiro 7, 2012

Amigos,

estou com uma dúvida. Fiz um layout para ser usado no wordpress, e tem as estruturas header, sidebar, content, right-sidebar e footer. Quando eu posto os posts o content cresce e as sidebars ainda ficam do mesmo jeito, elas não acompanham o crescimento da contente por causa dos comentarios. Como faço no CSS para as sidebars acompanharem o tamanho do contente?

Giovani · Fevereiro 7, 2012

Poste o que você já fez :mellow:

Evandro Oliveira · Fevereiro 7, 2012

procure pela técnica faux columns

Duilio Gomes Pereira · Fevereiro 8, 2012

Poste o que você já fez :mellow:

Bom, como estou fazendo no wordpress vou postar os códigos do header da aonde começo a body e da index aonde eu fecho, mas o CSS.

Header

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<?php if (is_home()){
bloginfo('name');
}elseif (is_category()){
single_cat_title(); echo ' -  ' ; bloginfo('name');
}elseif (is_single()){
single_post_title();
}elseif (is_page()){
bloginfo('name'); echo ': '; single_post_title();
}else {
wp_title('',true);
} ?>
</title><style type="text/css" media="screen">
	@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"/></script> 
<script type="text/javascript">

 $(function(){
  $("#cadastrar").click(function(){
	  $("#formulario_news").hide("slow");
	  beforeSend:$("#carregando_news").show("slow");
	  var email = $("#email").val();
	  $.post("<?php bloginfo('template_directory'); ?>/newsletter/form.php",{email: email}, function(pegar_retorno){
	  complete:$("#carregando_news").hide("slow");	  
	  $("#retorno").show("slow").text(pegar_retorno);	  
      });
  });
 });
</script>  
<?php wp_head(); ?>

</head>
<body>
<div id="tudo">
<div id="box">

 <div id="header">
   <div id="header_logo"> <a href="<?php echo get_settings('home'); ?>" title="Página Inicial"> <img src="<?php bloginfo('template_directory'); ?>/images/SindPrevLogo.png" alt="SindPrevAlLogo" border="0"/></a> </div>
   <!--fim da div header logo-->
   <div id="header_filiado"> <img src="<?php bloginfo('template_directory'); ?>/images/filiadoa.png" alt="filiado" border="0"/> </div>
   <!--fim da header filiado-->
   <div id="header_cut"> <a href="http://www.cut.org.br/" title="CUT" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/cut.png" alt="CUT" border="0" /></a> </div>
   <!--header cut-->
   <div id="header_cntss"> <a href="http://www.cntsscut.org.br/" title="CNTSS" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/cntss.png" alt="CNTSS" border="0" /></a> </div>
   <!--header cntss-->
   <div id="header_facebook"> <a href="http://www.facebook.com/pages/SINDPREV-AL/120922961344356?ref=ts" title="Facebook" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Facebook" border="0" /></a> </div>
   <!--header facedbook-->
   <div id="header_youtube"> <a href="http://youtube.com/user/LucianoSindprev" title="Youtube" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/youtube.png" alt="Youtube" border="0"  /></a> </div>
   <!--header youtube-->
   <div id="header_twitter"> <a href="http://twitter.com/sindprev_al" title="Twitter" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Twitter" border="0" /></a> </div>
   <!--header twtitter-->
   <div id="header_flickr"> <a href="http://www.flickr.com/photos/67766768@N07/page2/" title="Flicker" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/flicker.png" alt="Flicker" border="0"  /></a> </div>
   <!--header flickr-->
   <div id="header_search">
     <form>
       <label> <span>Busca</span>
         <input type="text"/>
         <input type="submit" value="" class="btn"/>
       </label>
     </form>
   </div>
   <!--header search-->
   <div id="header_menu">
     <ul>
       <li> <a href="<?php echo get_settings('home'); ?>">HOME </a></li>
       <li> <a href="http://localhost/SINDPREV/site/?page_id=7 "> DIRETÓRIA </a></li>
       <li> <a href=" http://localhost/SINDPREV/site/?page_id=9"> ESTATUTO </a></li>
       <li> <a href="http://localhost/SINDPREV/site/?page_id=12"> REGIMENTO INTERNO </a></li>
       <li> <a href="#"> HISTÓRIA </a></li>
       <li> <a href="#"> JURÍDICO </a></li>
       <li> <a href=" http://localhost/SINDPREV/site/?page_id=18"> APOSENTADOS </a></li>
       <li> <a href="#"> SEGURIDADE SOCIAL </a></li>
       <li> <a href="#"> INTERIOR </a></li>
       <li> <a href="#">EXPEDIENTE </a></li>
     </ul>
   </div>
   <!--header menu-->
   <div id="header_banner"> <img src="<?php bloginfo('template_directory'); ?>/images/Banner.png" alt="Banner" border="0" /> </div>
   <!--header banner--> 
 </div>
<!--fecha a div header-->

Index

<?php get_header();?>
<?php get_sidebar();?>
 <div id="content">
   <div id="content_dest_tit">
     <h1>Destaques</h1>
   </div>
   <!--fecha div titulo do destaque slide-->
   <div id="content_destaque"> <?php aio_slideshow(); ?> </div>
   <!--content destaque-->
   <div id="content_info_tit">
     <h1>Informativos</h1>

   </div>
   <div id="content_informativo">
     <ul>
      <?php query_posts('showposts=6&category_name=Informativos');?>
      <?php if (have_posts()): while (have_posts()) : the_post();?>
      <li><a href="<?php the_Permalink()?>"><?php the_time('j M Y ');?>-><?php the_title();?>:<span>Criado à <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' atrás'; ?></span></a></li>
      <?php endwhile; else:?>
      <?php endif;?> 
     </ul>
   </div>
   <!--content informativo-->
   <div id="content_dest_tit">
     <h1>Destaques Central</h1>
   </div>
   <div id="content_destaquecentral">
     <ul>
       <?php query_posts('showposts=6&category_name=DestaquesCentral');?>
      <?php if (have_posts()): while (have_posts()) : the_post();?>
      <li><a href="<?php the_Permalink()?>"><?php the_time('j M Y ');?>-><?php the_title();?>:<span>Criado à <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' atrás'; ?></span></a></li>
      <?php endwhile; else:?>
      <?php endif;?> 
     </ul>
   </div>
   <!--content destaquecentral--> 
 </div>
 <!--fecha div content-->
<?php include (TEMPLATEPATH . '/right_sidebar.php'); ?>
<?php get_footer();?>

</div>
<!--fechamento da div box-->
<?php wp_footer(); ?>
</div>  
</body>
</html>

CSS

/*
Theme Name: SINDPREVALAGOAS
Theme URI: http://www.sindprev-al.org.br
Description: Este tema foi desenvolvido pela empresa DPMidia.
Version: 1.0
Author: Duilio Pereira
Author URL: http://dpmimidia.com
Tags: portal
*/

/*RESET*/
*{margin:0; padding:0;}
body{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; background:#D50000;}
#tudo {
width:1000px;
background: url(images/faux-bg.gif) repeat-y 0 0;
text-align:left;
margin:0 auto;
}
#box{width:1000px; margin:0 auto;}
.alignleft{float:left; margin-right:5px;}
.alignright{float:right; margin-left:5px;}
blockquote{margin:10px; border-left:5px solid #005789; padding:0 5px; background:#DFEFFF;}

/*TOPO*/
#header{height:343px; width:1000px; border-bottom:4px solid #F00; background:#FFF;}

#header_logo{float:left; margin:5px 0 0 8px;}

#header_filiado{float:left; margin:70px 0 0 15px;}

#header_cut{float:left; margin: 50px 0 0 15px;}

#header_cntss{float:left; margin: 50px 0 0 15px;}

#header_facebook{float:left; margin: 40px 0 0 35px;}

#header_youtube{float:left; margin: 40px 0 0 35px;}

#header_twitter{float:left; margin: 10px 0 0 35px;}

#header_flickr{float:left; margin: 10px 0 0 35px;}


#header_search{float:left; margin-left:12px;}
#header_search span{font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-weight:normal;}
#header_search input{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#F00; font-weight:bold;width:467px;}
#header_search .btn{width:20px; height:23px; background:url(images/lupa.png) no-repeat;}


#header_menu{float:left; width:1000px; height:39px; background:#D50000;}
#header_menu ul{float:left; list-style:none; margin-left:3px;}
#header_menu li{float:left; display:inline; margin:11px 0px 2px 0; padding:0 6px; text-align:center;}
#header_menu li a{text-decoration:none; font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#FFF;}
#header_menu li:hover{background: center #000;}


#header_banner{float:left; margin-top:0px;}

/*LEFT SIDEBAR*/
#left_sidebar{width:210px; height:900px; float:left; background:#FFF;}

/*LEFT SIDEBAR DIRETÓRIO*/
#left_sidebar_diretorio{float:left; margin-top:10px; margin-left:17px;width:178px; border:thin; border-color:#D50000; border-style:solid; border-radius:8px;}
#left_sidebar_diretorio li{margin-left:19px;list-style:none; margin-top:5px;}

/*LEFT SIDEBAR QUEST*/
#left_sidebar_quest{float:left; width:178px; margin-left:17px; margin-top:60px;border:thin; border-color:#D50000; border-style:solid; border-radius:8px;}
.leftsidebar_quest{font:25px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#D50000; margin:0 0 5px 35px;}
#left_sidebar_quest span{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333; display:block; text-align:center;}
#left_sidebar_quest ul{list-style:none; margin:10px 0 10px 8px;}
#left_sidebar_quest ul li{margin:2px 0 0 0; text-align:justify; font:16px Georgia, "Times New Roman", Times, serif;} 
#left_sidebar_quest a{text-decoration:none; display:block; text-align:center; color:#F60; margin:3px 0; padding:0; font-weight:bold;}
#left_sidebar_quest .ver_result{font-weight:normal; text-transform:lowercase;}
#left_sidebar_quest a:hover{color:#F00;}

/*LEFT SIDEBAR BANNER*/
#left_sidebar_banner{float:left;margin-top:40px; margin-left:22px;}


/*CONTENT*/
#content{width:524px; float:left; background:#FFF; height:900px;}
#content_dest_tit h1{float:left; margin-top:5px; margin-left:25px;font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold;}

/*CONTENT DESTAQUE SLIDES*/
#content_destaque{float:left; margin-left:15px; margin-top:10px;width:490px; height:231px; background:#666;}

/*CONTENT TITULO DO INFORMATIVO*/
#content_info_tit h1{float:left; margin-left:15px; margin-top:20px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold;}

/*CONTENT INFORMATIVO LISTA DE NOTICIAS VINDAS DO SINDPREV*/
#content_informativo{float:left; margin-left:15px; margin-top:10px; width:490px; height:231px; background:#666;border-radius:8px;}
#content_informativo ul{float:left; margin-left:10px; margin-top:8px; list-style:none; }
#content_informativo a { font:Arial, Helvetica, sans-serif; font-size:12; color:#FFF; text-decoration:none;}
#content_informativo a:hover{text-decoration:underline;}
#content_informativo span{ font:Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none;}


/*CONTENT TITULO DOS DESTAQUE CENTRAL*/

#content_dest_tit h1{float:left; margin-left:15px; margin-top:20px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold;}

/*CONTENT DESTAQUE CENTRAL NOTICIAS VINDAS DA CUT*/
#content_destaquecentral{float:left; margin-left:15px; margin-top:10px; width:490px; height:231px; background:#D50000;border-radius:8px;}
#content_destaquecentral ul{float:left; margin-left:10px; margin-top:8px; list-style:none;}
#content_destaquecentral a { font:Arial, Helvetica, sans-serif; font-size:12; color:#FFF; text-decoration:none;}
#content_destaquecentral a:hover{text-decoration:underline;}
#content_destaquecentral span{ font:Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none;}

/*RIGHT SIDEBAR*/
#right_sidebar{width:266px; float:right; height:900px; background: #FFF;}
/*RIGHT SIDEBAR NEWSLETTER*/
#right_sidebar_news{border:thin; border-color:#D50000; border-style:solid; border-radius:8px;width:236px; height: auto; float:left; margin-left:9px; margin-top:10px;}
.right_newsletter{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333; margin:2px 0 5px 80px;}
#right_sidebar_news input{float:left; margin:2px 0 0 10px;width:210px; padding:3px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#999; border:1px solid #333;}
#right_sidebar_news .btn{width:100px; float:left; margin:5px 0 0 34px; padding:0; color:#fff; background:#333; cursor:pointer;}
#right_sidebar_news .btn:hover{background:#fff; color:#333;}
#right_sidebar_news label{display:block;}
#right_sidebar_news span{float:left; padding:7px; font-weight:bold;}

/*RIGHT SIDEBAR WEBMAIL*/
#right_sidebar_webcaixa{border:thin; border-color:#D50000; border-style:solid; border-radius:8px;float:left;width:236px; height:134px;margin-left:9px; margin-top:10px;}
#right_sidebar_webmail{float:left;margin-top:7px; margin-left:11px}

/*RIGHT SIDEBAR TV*/
#right_sidebar_tv{float:left; width:236px; height:184px; margin-left:9px; margin-top:10px;border:thin; border-color:#D50000; border-style:solid; border-radius:8px;}
#right_sidebar_tv a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333; margin-left:30px; margin-top:10px; text-decoration:none;}
#right_sidebar_tv a:hover{text-decoration:underline;}
#right_sidebar_tv_you{float:left; margin:10px 0 0 10px;}

/*RIGHT SIDEBAR RÁDIO*/
#right_sidebar_radio{float:left; width:236px; height:184px; margin-left:9px; margin-top:10px;border:thin; border-color:#D50000; border-style:solid; border-radius:8px;}
#right_sidebar_radio a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333; margin-left:16px; margin-top:10px; text-decoration:none;}
#right_sidebar_radio a:hover{text-decoration:underline;}
#right_sidebar_rad_cloud{float:left; margin:10px 0 0 10px;}

/*RIGHT SIDEBAR ARTIGOS*/
#right_sidebar_artigos{float:left; margin:10px 0 0 35px;}
.right_sidebar_autor{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333; margin:0 0 5px 0;}
#right_sidebar_artigos a{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; color:#D50000;}
#right_sidebar_artigos a:hover{text-decoration:underline;}
#right_sidebar_artigos img{float:left; padding:2px; border:1px solid #ccc; margin-right:5px;}
#right_sidebar_artigos ul{list-style:none; margin:0; padding:0;}
#right_sidebar_artigos ul li{float:left; width:190px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px groove #333;}
#right_sidebar_artigos span{display:block;}


/*FOOTER*/


#footer{float:left; margin-top:5px; width:1000px; height:110px; background:#FFF; border-top:solid; border-top-color:#D50000;}
#footer_dizeres{float:left; margin-left:90px; margin-top:25px;}
#footer_dizeres ul{float:left; list-style:none; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#D50000;}
#footer_dizeres ul li{ text-align:center;}
#footer_diz_dpmidia li {float:left; margin:20px 0 0 300px; list-style:none;}


/*PAGE*/
#page {width:500px;}
#page .titulo{font:24px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#D50000;
             margin-bottom:5px; padding-bottom:3px; border-bottom:10px solid #ccc; float:left; width:524px;}
#page h1{font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#F90; margin:5px 0;}
#page h2{font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#666; margin:5px 0;}
#page h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#999; margin:5px 0;}
#page h4{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#005789 ;margin:5px 0;}
#page p{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; margin:10px 0;}
#page ul{list-style:square; margin:0 0 0 25px ;}
#page ol{margin:0 0 0 30px ;}

/*SINGLE*/
#single {width:500px;}
#single .titulo{font:24px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#D50000;
             margin-bottom:5px; padding-bottom:3px; border-bottom:10px solid #ccc; float:left; width:524px;}
#single h1{font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#F90; margin:5px 0;}
#single h2{font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#666; margin:5px 0;}
#single h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#999; margin:5px 0;}
#single h4{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-variant:small-caps; color:#005789 ;margin:5px 0;}
#single p{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; margin:10px 0;}
#single ul{list-style:square; margin:0 0 0 25px ;}
#single ol{margin:0 0 0 30px ;}
#single ul li{margin:3px 0;}
#single form{width:500px; display:block; margin:0 auto; padding:10px; background:#E8E8E8;}
#single form p{display:block; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#005789; font-variant:small-caps; margin:15px 0;}
#single input{width:490px; padding:5px; border:1px solid #333; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#999; font-variant:small-caps;}
#single textarea{width:490px; padding:5px; border:1px solid #333; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#999; font-variant:small-caps;}
#single select{width:490px; border:1px solid #333; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#999; font-variant:small-caps;}
#single .btn{width:150px; display:block; margin:0 auto; cursor:pointer; background:#fff; color:#666;}
#single .btn:hover{border:1px solid #005789; color:#005789;}
#single a{color:#005789;}
#single a:hover{color:#F90;}

Diéssica · Fevereiro 8, 2012

Se quer que colunas expandam juntas...

procure pela técnica faux columns

A solução do wbruno é boa:

:seta: http://forum.imasters.com.br/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

Se a div não está expandindo com o conteúdo que está sendo colocado nela...

overflow:hidden;

Pra uma div ocupar 100% da altura, vale tentar com um height:100% também, apesar de ser meio gambiarra e poder gerar problemas de incompatibilidade. Se não se preocupa muito com esses IEs antigos, use :thumbsup:

Entrar

Arquivado

Como faço isso no CSS?

Recommended Posts

Duilio Gomes Pereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Duilio Gomes Pereira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante