Layout Fluído/ Liquido

[Lucas Röhers 0]

Bom dia, boa tarde ou boa noite!

 

Olá pessoal, venho aqui para pedir a ajuda de vocês para pôr o layout fluído no meu site que não estou conseguindo..

segue o código CSS:

/*

Design by Metamorphosis Design

http://www.metamorphozis.com

Released for free under a Creative Commons Attribution 2.5 License

*/

 

*{

margin: 0px;

padding: 0px;

}

 

a:link {

color: #295C6F;

}

 

a:hover {

text-decoration: none;

color: #FF0000;

}

 

a:visited {

color: #295C6F;

}

 

body {

 

background: #000000;

font: 12px Arial, Helvetica, sans-serif;

color: #000000;

}

 

.back_all

{

background: url(images/bg.jpg) no-repeat center top;

}

 

.top

{

padding-bottom: 20px;;

}

 

.top H1

{

font-size: 18px;

}

 

.top H2

{

font-size: 13px;

}

 

.top a

{

text-decoration: none;

color: #ffffff

}

 

 

#content

{

margin: 0 auto;

width: auto;

text-align: left;

padding-top: 20px;

}

 

#main

{

width: 972px;

background: url(images/back_top.jpg) repeat-x top;

padding-top: 10px;

}

 

#back

{

width: 993px;

background: #ffffff;

border-left: 7px solid #ffffff;

border-right: 7px solid #ffffff;

}

 

#header {

height: 300px;

 

}

 

#logo {

 

width: 993px;

height: 228px;

background: url(images/header.jpg) repeat;

}

 

 

#logo a {

text-decoration: none;

text-transform: lowercase;

font-style: italic;

font-size: 18px;

color: #ffffff;

}

#logo H2 a

{

font-size: 12px

}

 

 

#menu

{

width: 993px;

border-top: 6px solid #FFFFFF;

border-bottom: 6px solid #FFFFFF;

height: 56px;

background: url(images/buttons.gif) repeat-x;

}

 

#menu ul {

list-style: none;

}

 

#menu li {

 

display: inline;

 

}

 

#menu a {

float: left;

width: 120px;

height: 38px;

display: block;

text-align: center;

text-decoration: none;

color: #FFF;

font-weight: bold;

font-size: 14px;

padding-top: 18px;

text-transform: none;

}

 

#menu a:hover {

width: 120px;

height: 38px;

color: #FFF;

text-decoration: none;

background: #D3D3D3;

}

ul#menu li ul {

display:none;

}

 

 

.wrapper {width:100%;overflow:hidden; font-size: 12px; padding: 10px; color: #666666}

.col1, .col2, .col3, .cols {float:left}

.col1{width:290px}

.col2 {width:240px}

.col3 {width:252px}

.pad_left1 {padding-left:67px}

.pad {padding:0 10px}

.list1 {

list-style: none

}

.list1 li {padding-bottom:20px; padding-top: 10px; padding-left:14px;background:url(images/marker_1.gif) 0 18px no-repeat}

.list1 li a {display:block;font-weight:bold;color:#0f0f0f;text-decoration:none}

.list1 li a:hover {color:#13c5ff}

.date {float:left;width:46px;margin-right:20px;text-align:center;font-size:25px;color:#666666;line-height:1.2em;padding-bottom:20px}

.date span {display:block;font-size:53px;line-height:1.2em;margin-top:-8px;margin-bottom:-22px;letter-spacing:-2px}

.img {display:block;}

h2 {font-size:20px;line-height:1.2em;color:#666666;padding:1px 0 17px 10px;letter-spacing:-1px}

h2 span {color:#13c5ff}

 

 

.row-top {width:100%;padding:33px 0 42px;}

.row-padding {padding:0 62px}

.col-1, .col-2, .col-3, .col-4 {float:left}

.list-services li {line-height:24px;padding-left:28px; list-style:none}

.list-services li a {color:#9d9d9d;text-decoration:none}

.list-services li a:hover {text-decoration:underline}

.list-services li.item-1 {background:url(images/facebook.png) 0 3px no-repeat}

.list-services li.item-2 {background:url(images/twitter.png) 0 3px no-repeat}

.list-services li.item-3 {background:url(images/linkedin.png) 0 3px no-repeat}

.menu li a, .list-1 li a, {text-decoration:none}

.list-1 li {line-height:24px;padding-left:10px;background:url(images/marker.gif) 0 10px no-repeat; list-style:none}

.list-1 li a {display:inline-block;color:#9d9d9d}

.list-1 li a:hover {text-decoration:underline}

 

.indent3 {padding-top:28px}

.footer-logo {display:block;color:#666666;font-size:30px;line-height:1em;text-transform:uppercase;letter-spacing:-3px;font-weight:400;margin-bottom:5px}

.footer-logo strong {color:#666666;text-transform:none;display:inline-block}

.phone {display:inline-block;font-size: 24px;line-height:1.2em;color:#666666;letter-spacing:-1px;padding-left:5px}

.phone strong {color:#666666}

.col-1 {width:190px;margin-right:55px}

.col-2 {width:110px;margin-right:55px}

.col-3 {width:140px;margin-right:65px}

.col-4 {width:235px}

 

 

#footer {

height: 54px;

clear: both;

padding-top: 20px;

border-top: 5px solid #666666;

margin-left: 5px;

margin-right: 5px;

background: url(images/footer.gif) repeat-x top;

}

 

#footer p {

margin: 0;

font-size: 10px;

text-align: center;

color: #333333;

}

 

#footer a {

color: #333333;

}

 

 

 

/-----------------------------

 

 

#slider-wrapper {

background:url(images/top.jpg) no-repeat;

width: 978px;

height: 390px;

margin:0 auto;

}

 

#slider {

position:relative;

width: 978px;

height: 390px;

background:url(images/loading.gif) no-repeat 50% 50%;

}

#slider img {

position:absolute;

top:0px;

left:0px;

display:none;

}

#slider a {

border:0;

display:block;

}

 

.nivo-controlNav {

position:absolute;

left:260px;

bottom:-42px;

display: none;

}

.nivo-controlNav a {

display:block;

width:22px;

height:22px;

background:url(images/bullets.png) no-repeat;

text-indent:-9999px;

border:0;

margin-right:3px;

float:left;

}

.nivo-controlNav a.active {

background-position:0 -22px;

}

 

.nivo-directionNav a {

display:block;

width:30px;

height:30px;

background:url(images/arrows.png) no-repeat;

text-indent:-9999px;

border:0;

}

a.nivo-nextNav {

background-position:-30px 0;

right:15px;

}

a.nivo-prevNav {

left:15px;

}

 

.nivo-caption {

text-shadow:none;

font-family: Helvetica, Arial, sans-serif;

}

.nivo-caption a {

color:#efe9d1;

text-decoration:underline;

}

 

[Diéssica 140]

Lucas,

só pelo CSS fica difícil descobrir. Qual é a div que recolhe todo o site?

 

Não tem um exemplo online de como tá o site agora?

 

Lembra de colocar os código em code, assim fica ruim de ler. Quote é pra citações.