Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs not flowing with content

    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.



    Code:
    <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=yes,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=yes,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=aHR0cDovL2xvY2FsaG9zdC9qL2luZGV4LnBocC9jb21wb25lbnQvY29udGVudC9hcnRpY2xlLzEtdGVzdGU%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:
    Code:
    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;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    cant see the image but i imagine you'll want to look in to "faux columns"

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Fidelix View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh man, i'm sorry, here is a direct link:


    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.
    Last edited by Fidelix; 12-10-2009 at 03:14 AM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    So, faux columns aint real columns.
    Hence the name faux. French for fake.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Try this Fidelix -
    Code:
    div#wrapper {
    	margin-left: auto;
    	margin-right: auto;
    	/*height: 100%;*/
    	background: #CC0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try this Fidelix -
    Code:
    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...

  • #12
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to do it with faux columns. Its a curious technic.
    Thank you very much people.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •