Divs not flowing with content [Archive]

Fidelix

12-09-2009, 08:58 PM

Hello folks, i'm new here, so ill try to explain it as better as i can.

I'm trying to make the 3 main divs:
left, content and right
To flow with the content in my website, but i'm really not getting into it.

I have tried everything in my mind, so i came here for help.
Please, take a look at the / HTML / CSS and help in any way u can. I cant send a link because i'm hosting it locally, and its in php. But here goes an screenshot.

I'm already grateful.

ps. i removed some of the irrelevant code so it would fit in the limits of the forum.

http://www.anbient.net/i/thumbs/floooow.jpg (http://www.anbient.net/i/?v=floooow.jpg)

<head>
<base href="http://localhost/j/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elevasul</title>

</head>

<body id="page_bg" class="color_orange bg_white width_fmax">

<a name="up" id="up"></a>

<div id="wrapper">
<div id="search">

</div>

<div id="wrapper_r">

<div id="header">

<div id="header_l">
<div id="header_r">
<div id="logo">
#Menus were here.#
</div>

</div>
</div>
</div>




<div id="caixesquerda" ></div>
<div id="caixadireita" ></div>

<div id="top-panel"><div id="loginu"> <div class="module">
<div>
<div>
<div>

<span class="quick" style="display: block;">
<span class="yoo-login"><span class="login"><form action="index.php" method="post" name="login"><span class="username">

<input type="text" name="username" size="18" alt="Nome de Usuário" value="Nome de Usuário" onblur="if(this.value=='') this.value='Nome de Usuário';" onfocus="if(this.value=='Nome de Usuário') this.value='';" />

</span> <span class="password">

<input type="password" name="passwd" size="10" alt="Senha" value="Senha" onblur="if(this.value=='') this.value='Senha';" onfocus="if(this.value=='Senha') this.value='';" />

</span> <input type="hidden" name="remember" value="yes" /> <span class="login-button-icon">
<button value="" name="Submit" type="submit" title="Login"></button></span><span class="lostpassword"></span><span class="lostusername"></span><span class="registration"><a href="/j/index.php/component/user/?task=register" title="Crie uma conta"></a>
</span> </span></span></span></div></div></div>
</div></div><div class="module"><div><div><div>
<form name="rokajaxsearch" id="rokajaxsearch" class="light" action="http://localhost/j/" method="get">
<div class="rokajaxsearch">
<input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value=" Buscar..." />
<div id="roksearch_results"></div>
</div>
<div id="rokajaxsearch_tmp" style="visibility:hidden;display:none;"></div>
</form> </div>
</div>
</div>
</div>
</div><div id="sub-panel"><a href="#" id="toggle"><span>Login / Busca</span></a></div>
<div id="whitebox">
<div id="whitebox_t">
<div id="whitebox_tl">
<div id="whitebox_tr"></div>
</div>
</div>

<div id="whitebox_m">
<div id="area">

<div id="leftcolumn">
</div>

<div id="maincolumn_full"><table class="nopad"><tr valign="top"><td>
<div class="componentheading">
Elevasul</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div>

<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
teste </td>

<td align="right" width="100%" class="buttonheading">
<a href="/j/index.php?view=article&id=1:teste&format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=y es,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/pdf_button.png" alt="PDF" /></a> </td>

<td align="right" width="100%" class="buttonheading">
<a href="/j/index.php?view=article&id=1:teste&tmpl=component&print=1&layout=default&page=" title="Imprimir" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=y es,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/printButton.png" alt="Imprimir" /></a> </td>

<td align="right" width="100%" class="buttonheading">
<a href="/j/index.php/component/mailto/?tmpl=component&link=aHR0cDovL2xvY2FsaG9zdC9qL2luZGV4LnBocC9jb21wb25lbnQvY29udGVudC9hcnRpY2xlLzEtdGV zdGU%3D" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/j/images/M_images/emailButton.png" alt="E-mail" /></a> </td>
</tr>
</table><table class="contentpaneopen"><tr>
<td valign="top" colspan="2"><p>HERE IS ALL THAT HUGE TEXT. REMOVED IT SO THE CODE WOULD BE SMALLER</p></td></tr></table>
<span class="article_separator"> </span>
</div></td>
</tr></table>

</td>
</tr>
</table>

</div></div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>

<div id="whitebox_b">
<div id="whitebox_bl">
<div id="whitebox_br"></div>
</div>
</div>
</div>

<div id="footerspacer"></div>
</div>

<div id="footer">
<div id="footer_l">
<div id="footer_r">
<p id="syndicate">

</p>
<p id="power_by">
Desenvolvido por <a href="http://www.felipefidelix.com">Felipe Fidelix</a>.
</p>
</div>
</div>
</div>
</div></body>
</html>

CSS:

html, body{
height: 100%;
}
html {
margin-bottom: 1px;
}
form {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
}
a:hover {
text-decoration: underline;
font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; }
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
height: 100%;
}

div.center {
text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
}

body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}

div#header_l {
position: relative;
}

div#header_r {
height: 217px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
text-align: left;
}
.x {
display:block;
height: 100%;
width: 100%;
}
div#menuh1 { background: url(../images/mn/home.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 89px; height: 108px;
margin-right: 3px;
}
div#menuh2 {
background: url(../images/mn/empresas.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 74px; height: 108px;
margin-right: 3px;
}
div#menuh3 {
background: url(../images/mn/servicos.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 74px; height: 108px;
margin-right: 3px;
}
div#menuh4 {
background: url(../images/mn/usados.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 74px; height: 108px;
margin-right: 3px;
}
div#menuh5 {
background: url(../images/mn/campanha.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 74px; height: 108px;
margin-right: 3px;
}
div#menuh6 {
background: url(../images/mn/contato.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 91px; height: 108px;
}
div#menuh1-y {
background: url(../images/mn/home-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 92px; height: 108px;
}
div#menuh2-y {
background: url(../images/mn/empresa-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 82px; height: 108px;
margin-left: -3px;
}
div#menuh3-y {
background: url(../images/mn/servicos-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 82px; height: 108px;
margin-left: -3px;
}
div#menuh4-y {
background: url(../images/mn/usados-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 82px; height: 108px;
margin-left: -3px;
}
div#menuh5-y {
background: url(../images/mn/campanha-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 82px; height: 108px;
margin-left: -3px;
}
div#menuh6-y {
background: url(../images/mn/contato-y.png) 0 0 no-repeat;
position: relative; float: right; top: 60px;
width: 96px; height: 108px;
margin-left: -3px;
}
div#logo {
position: absolute;
left: 0;
top: 0;
width: 1024px;
height: 238px;
background: url(../images/fdx-header.jpg) 0 0 no-repeat;
margin-left: 15px;
margin-top: 16px;
}

div#newsflash {
width: auto;
margin-left: 350px;
margin-right: 30px;
border: 1px solid #00f;
}

div#tabarea {
background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
margin: 0 11px;

}

div#tabarea_l {
background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
padding-left: 32px;
}

div#tabarea_r {
height: 42px;
background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
padding-right: 1px;
}

div#footer_r {
padding-top: 10px;
height: 47px;
overflow: hidden;
}

div#footer_r div {
text-align: center;
font-size: .90em;
color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited {
color: #999;
}

div#footerspacer {
height: 10px;
}

#pathway {
padding: 0px 10px 8px;
width: auto;
margin-top: -2px;
margin-right: 250px;
text-align: left;
}

form#searchForm input {
vertical-align: middle;
}

form#searchForm table {
border-collapse: collapse;
}

form#searchForm td {
padding:0;
}

#mod_search_searchword {
padding-left: 3px;
}

#area {
padding: 0;

}

#whitebox {
background: #fff;
margin: 0 auto 0 auto;
background: #fff;
width: 800px;
}

/*#whitebox {
margin: 0 21px 0px 21px; background: #fff; width: auto;
}*/

#whitebox div {
text-align: left;

}

#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
height: 10px;
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: auto;
padding: 1px 8px;
}

#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
margin-left: auto;
margin-right: auto;
padding: 0;
}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;

}

td.pill_m {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}

#pillmenu {
white-space: nowrap;
height: 32px;
float: left;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #000;
text-decoration: none;
}

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
min-height: 100%;
/*height: 100%;
overflow: auto;*/
}

#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}

table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}

table.nopad td.middle_pad {
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

/* headers */
div.componentheading {
padding-left: 0px;
}

h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;

}

a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }

/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {
padding-right: 5px;
}

.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}

td.buttonheading {

}

td.buttonheading img {
border:none;
}

.clr {
clear: both;
}

td.greyline {
width: 20px;
background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}

table.blog span.article_separator {
display: block;
height: 20px;
}

/* edit button */
.contentpaneopen_edit{
float: left;
}

/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
float: right;
}

table.contenttoc td {
padding: 0 5px;
}

/* content tables */
td.sectiontableheader {
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}

table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
width: 100%;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

.highlight {
background-color: #fffebb;
}

table.user1user2 div.moduletable {
margin-bottom: 0px;
}

div.moduletable, div.module {
margin-bottom: 25px;
}

div.module_menu h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_menu {
margin: 0;
padding: 0;
margin-bottom: 15px;
}

div.module_menu div div div {
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}

div.module_menu div div div div {
background: none;
padding: 0;
}

div.module_menu ul {
margin: 10px 0;
padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
}

#leftcolumn div.module {
padding: 0 10px;
}

#leftcolumn div.module table {
width: auto;
}

/* forms */
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }

div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}
#caixesquerda {
background-color: #BFC0C1;
width: 91px;
display: block;
height:100%;
float: left;
margin-left: 15px;
margin-top: -9px;
background-position: right;
background-image:url('../images/sombra-left.gif');
background-repeat: repeat-y;

}
#caixadireita {
background-color: #BFC0C1;
width: 82px;
display: block;
height: 100%;
float: right;
margin-right: 15px;
margin-top: -9px;
background-position: left;
background-image:url('../images/sombra-right.gif');
background-repeat: repeat-y;
}