Problema com coluna

DigitalBoy

DigitalBoy

Power Member
Estou com um problema num prototipo de um layout que estou a fazer.
Fiz 3 colunas: sidebar, conteudo e publicidade, mas acontece que como podem ver aqui http://84.90.209.231 (está ligado ao apache por isso só ficará on até amanha de manha ou até receber ajuda.) a coluna do centro agarra-se á sidebar.
Como poderei num design liquido fazer com que a coluna do conteúdo ocupe apenas a parte que lhe compete sem dar medidas concretas que não %?

O que eu tenho é:
Index.html
Código: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<title>NoName Site (AKA test)</title> 
	
<head>
<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>
<div id="wrap" class="clearfix">
<div id="topnavup">
<ul class="links">
<li><a href="/page1">link1</a></li> 
<li><a href="/page2">link2</a></li> 
<li><a href="/page3">link3</a></li> 
<li><a href="/page4">link4</a></li> 
</ul>
</div>
<div id="header" class="header"><a href="http://84.90.209.231/">Test Site Layout</a></div>
<div id="topnavdown">
<ul class="links">
<li><a href="/page5">link5</a></li> 
<li><a href="/page6">link6</a></li> 
<li><a href="/page7">link7</a></li> 
<li><a href="/page8">link8</a></li> 
</ul>
</div>
<div id="leftcol">
	<h1>123456789123456789123456789123456789123456789</h1>
	</div>
<div id="rightcol">
<div id="AdsTitle"><h3>Advertisements</h3></div>
	<img src="./ads/120600.jpg"/>
	</div>
<div id="title">
	<h2>The Title!</h2>
</div>
<div id="content"><p class="one">There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content </p>

<p>There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content </p>
</div>
<div id="footer">
<h2>The footer!</h2><ul class="links">
<li><a href="/page5">link5</a></li> 
<li><a href="/page6">link6</a></li> 
<li><a href="/page7">link7</a></li> 
<li><a href="/page8">link8</a></li> 
</ul>
</div></div>
</body>
</html>

e CSS.css
Código: 
body {
	background-color:#AAAAAA;
	font-family:arial, verdana, sans-serif;
	font-size:12px;
	}
#wrap {
	margin-left: 20px ;
	margin-right: 20px ;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	background-color:white;
	display:block;
	}
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
.clearfix{display: inline-block;}
li{
	display:inline;
	}
ul.links {
	list-style-type:none;
	}
#topnavdown  {
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	}
#header {
	top:0px;
	left:0px;padding:20px;
	font-size:28px;
	color:#ffffff;
	background-color:gray;
	border-style:solid;
	border-width:2px;
	border-color:#000000;
	}
#leftcol {
	float:left;
	background-color:green;
	width:150px;
	word-wrap:break-word;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	}
#rightcol {
	float:right;
	background-color:#696969;
	width:120px;
	word-wrap:break-word;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	padding: 10px
	}
#AdsTitle {
	
	}
#content {
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	width:80%;
	}
#footer {
	clear:both;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	}

O que posso fazer para corrigir? E já agora há muita coisa errada no layout?

Cumprimentos e obrigado
 
O que deves fazer é meter as colunas seguidas.
Em vez de teres <div id="leftcol"></div> <div id="rightcol"></div> <div id="title"></div> deves ter <div id="leftcol"></div> <div id="title"></div> <div id="rightcol"></div>.

O código é lido de cima para baixo da esquerda para a direita, deves fazer o código a pensar nisso.

Depois creio que meter um "float: left" em todas as div deve fazer o que queres.
 
Muito obrigado. Já consegui corrigir.

Aproveitei e fiz umas adaptações para se adaptar melhor ás resoluções que foi: Como a coluna central esta em % mas as laterais estão em px fiz com que a folga que se dá com o aumento fique entre a coluna central e a coluna direita sendo que em 1920px de largura de ecrã a folga vai até 200px sendo que quando está a 1024px de largura de ecrã ronda os 5~10px.
Se alguém tiver um ecrã com uma resolução consideravelmente maior que 1360px de largura (1440 ou +) pode fazer o favor de ver se essa folga estraga muito o aspecto?

Existe algum método de que a coluna central tenha sempre "x" pixels entre laterais? É que como as as outras duas não são percentagens retiram essa capacidade visto que por exemplo 100px + 80%+ 100px(de largura) em um ecrã de 800px(mero exemplo) desformáta mas essa mesma quantidade num ecrã de 2000px tem uma folga de 200px . Há como resolver essa questão ou a única forma é fazer como fiz que é mandar as folgas para áreas que não chamem tanto a atenção?

Cumprimentos
 
Inicie sessão ou registe-se para poder participar.
Back
Topo