Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;#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;#content_content {
float:left;
width:75%;#content_sidebar {
width:25%;
float:right;
background:url(../images/bg_body2.png);/**/#banners {
height:300px;
overflow:hidden;
background:url(../images/bg_banner.png);#loop_banner{
width:900px;
height:300px;
overflow:hidden;
margin:0px auto;.header_menu {
list-style:none;
font-size:20px;.menu_option {
float:left;
color:#FFF;Carregando comentários...