...

View Full Version : Divs not flowing with content



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 class="center" align="center">-->
<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="tabarea">
<div id="tabarea_l">
<div id="tabarea_r">
<div id="tabmenu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l">&nbsp;</td>
<td class="pill_m">
<div id="pillmenu">

</div>
</td>
<td class="pill_r">&nbsp;</td>
</tr>
</table>
</div>
</div>
</div>
</div>-->
<!--<div id="pathway">

</div></div>
<div class="clr"></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&amp;id=1:teste&amp;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&amp;id=1:teste&amp;tmpl=component&amp;print=1&amp;layout=default&amp;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&amp;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">&nbsp;</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><!--</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;
}

met
12-10-2009, 12:44 AM
cant see the image but i imagine you'll want to look in to "faux columns"

Fidelix
12-10-2009, 12:59 AM
cant see the image but i imagine you'll want to look in to "faux columns"

The image is attached.
How could i benefit from Faux columns?
I did not understand it properly

Excavator
12-10-2009, 01:37 AM
The image is attached.
How could i benefit from Faux columns?
I did not understand it properly

Hello Fidelix,
Your image link asks for a user/pass.
Here is a description and demo of Faux Columns - http://nopeople.com/CSS/faux_columns/index.html and you can google it for a lot more.

Fidelix
12-10-2009, 02:09 AM
Oh man, i'm sorry, here is a direct link:

http://www.anbient.net/i/img/floooow.jpg
http://www.anbient.net/i/img/floooow.jpg

So, faux columns aint real columns.

Its just an image to simulate columns and a div to restrict the Y space of the content?
Sorry if i got it wrong.

Excavator
12-10-2009, 02:20 AM
So, faux columns aint real columns.

Hence the name faux. French for fake.

Fidelix
12-10-2009, 10:41 AM
Hence the name faux. French for fake.

Well, thats interesting. hahaha
I'll try to achieve this and ill post here if i accomplish it or else.

Thank you

Excavator
12-10-2009, 07:08 PM
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 a little unlcear what your wanting to accomplish...


Are you wanting the header and footer to stay put while the content scrolls?
Are you wanting the footer to go below your content instead of pasted in the middle like that?
Are you wanting a full height layout that keeps the footer at the bottom of the viewport even when there is no content to push it down there?

Fidelix
12-10-2009, 07:32 PM
I a little unlcear what your wanting to accomplish...


Are you wanting the header and footer to stay put while the content scrolls?
Are you wanting the footer to go below your content instead of pasted in the middle like that?
Are you wanting a full height layout that keeps the footer at the bottom of the viewport even when there is no content to push it down there?



I want the footer to go below, beyond the content. And if the content expands itself, the footer goes with it. And stays below.

And obviously, i want the left and right column to flow with the content, and get full height just like in the picture.

The problem in this layout is that the footer did not went down with the middle div. Thats why the overflow happened. And i cant fix it.

Thank you for your attention.

Excavator
12-10-2009, 10:35 PM
Try this Fidelix -

div#wrapper {
margin-left: auto;
margin-right: auto;
/*height: 100%;*/
background: #CC0;
}

Fidelix
12-14-2009, 12:21 PM
Try this Fidelix -

div#wrapper {
margin-left: auto;
margin-right: auto;
/*height: 100%;*/
background: #CC0;
}

Thanks man for the help.

However, this code didnt work either...
The div DO flow with the content, but the right and left columns do not appear.

For now, i'll try Faux columns, and ill get back here to show results.

Later...

Fidelix
12-25-2009, 11:45 AM
I managed to do it with faux columns. Its a curious technic.
Thank you very much people.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum