Page 1 of 1
Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 4:03 pm
by Teonnyn
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!
Code: Select all
@charset "utf-8";
/* CSS Document */
body, html {
margin:0px;
padding:0px;
background-color:#000000;
}
#viewPort {
position:relative;
margin:auto;
width:850px;
height:100%;
}
#header {
position:relative;
margin:auto;
width:850px;
height:200px;
}
#menu {
position:relative;
margin:auto;
z-index:4;
width:850px;
height:28px;
background-color: #FFFFFF;
background-image:url(images/backgroundPage.png);
}
#body {
position:relative;
margin:auto;
width:840px;
min-height:370px;
height:100%;
padding-left:5px;
padding-right:5px;
border-top:#333333 solid 5px;
background-color:#999999;
background-image:url(images/bodybackground.png);
}
#footer {
position:relative;
margin:auto;
width:850px;
height:29px;
}
#twitter {
position:absolute;
left:19px;
top:4px;
width:32px;
height:32px;
z-index:2;
}
#facebook {
position:absolute;
left:53px;
top:4px;
width:32px;
height:32px;
z-index:2;
}
Here's my CSS so far. I have no idea how to fix this!
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 4:40 pm
by kaszu
Try removing "height: 100%", if doesn't help maybe child divs have float set?
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 5:11 pm
by Teonnyn
No float, and removing height:100% had no effect.. in fact, the body div completely collapsed while the child divs remained visible.
This is how the selected pages are displayed within the "Body" div:
Code: Select all
<div id="body">
<?PHP include_once("pageControl.php") ?>
</div>
From there, pageControl.php does this:
Code: Select all
<?PHP
$pager = $_GET['page'];
switch ($pager) {
case 1:
include("/pages/home.php");
break;
}
?>
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 9:06 pm
by daedalus__
? do you have a link for us?
set height to 100% on html and body
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 9:40 pm
by Teonnyn
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
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 10:50 pm
by daedalus__
well would you care to email me a link or something so i can see whats going on? yeah the way you are doing it will make the divs children to div#body
but you haven't set any styles on that div and that's probably why there is a mess.
why is everything positioned?
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 10:57 pm
by Teonnyn
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.
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 11:26 pm
by daedalus__
expanding to fit whatever is in it? that's default behavior.
Re: Div refuses to acknowledge child divs
Posted: Thu Dec 17, 2009 11:47 pm
by Teonnyn
It's probably something I'm doing wrong then.. I'm used to building static layouts that don't expand, with top/left and width/height set.
I'd like to keep width: 850px or maybe width: 100% to get it to match the container it's held in.. what should I be doing?
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 12:43 am
by daedalus__
block level elements are the width of their parent by default.
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 1:22 am
by Teonnyn
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.
Code: Select all
<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.
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 1:46 am
by daedalus__
when you absolutely position a child div it "takes it out" of the parent div, leaving the parent div empty if it is the only child.
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 2:06 am
by Teonnyn
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.
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 2:21 am
by daedalus__
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.
http://www.brainjar.com/css/positioning/
http://www.barelyfitz.com/screencast/ht ... sitioning/
Re: Div refuses to acknowledge child divs
Posted: Fri Dec 18, 2009 8:55 am
by Teonnyn
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.
