I'm working on a four-row template for a site I'm building mostly with custom code, no reliance on Joomla, Drupal, or any other CMS so far. This consists of a Header > Horizontal Menu > Page Viewer Div > Footer. The header, horizontal menu and footer are all static, while the viewer should technically expand with any child divs that fit in it. This is where it gets.. rocky. The viewer expands - with pure text. The moment I apply any child divs to the viewer, it fails to expand. The pages also change dynamically. I've tried "floats", height:100%... ton of other things, with none of them working. Very honestly, I'm ready to go back to tables to solve this!
Even though the project is trademarked, at the moment I'd like to hold back revealing the actual website. Tried html, body { height:100% } and that pushed the footer all the way to the bottom of the page but didn't expand the content div to match the child div heights. I think the way I'm doing it, with an include("home.php"); setup does make the home.php divs child to the content div...but I'm not sure
I'm basically trying to obtain a one-column flexible layout with the "Body/View" div expanding to fit whatever is in it. I keep looking for tutorials on how to do this, but all there seems to be are two and three-column layouts.
The problem seems to be partially solved. Whenever I change the settings on the CSS rules for the "home.php" file, the viewer div suddenly expands. However, the moment I apply any top/left settings - either absolute or relative.. the viewer div collapses.
<style type="text/css">
<!--
#Axial {
position:absolute;
left:15px;
width:265px;
height:400px;
}
#squawk {
left:277px;
width:500px;
height:350px;
background-image:url(/site/images/squakbox.png);
}
#squakcontent {
position:relative;
left:17px;
top:13px;
width:467px;
height:318px;
}
-->
</style>
<div id="Axial"><img src="/site/images/standingguy_right_teeth.png" width="265" height="400"></div>
<div id="squawk">
<div id="squakcontent">This is a test to see what will happen when I fill the squakbox up with text as if this particular character was chatting to the user.</div>
</div>
This is the code for "home.php", everything in which becomes child to the "viewer" div when it's loaded in. I noticed right away that editing "Axial" has no effect, but if I edit "squawk", it expands around it.
Setting these divs as "relative" positioning seems to completely disable any ability to position them at all..for instance, "#squawk" as relative forces it under #Axial and only allows #Axial to be moved in any way whatsoever. Setting #Axial as relative produces the same effect.
that's wrong. i don't know why you are positioning everything in the first place. absolute positioning positions an element on a grid where 0,0 is the upper left corner of the viewport. relative positioning positions an element relative to the its rendered position on the page. fixed positioning is the same as absolute positioning but fixes the element on the viewport (i.e. it doesn't scroll). there is also another technique that is not as well known where you relatively position a parent element then absolutely position the children elements. this allows you to set an absolute position inside of a parent element.
YES! Thank you! Jubilation!
I wish I'd known about this before.. building a Fluid layout is Much Different then building a Static.
I've been so used to applying top/left that I had no idea I wasn't supposed to do that with a Fluid.