Div refuses to acknowledge child divs

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Div refuses to acknowledge child divs

Post 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!
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Div refuses to acknowledge child divs

Post by kaszu »

Try removing "height: 100%", if doesn't help maybe child divs have float set?
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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;
}
?>
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post by daedalus__ »

? do you have a link for us?

set height to 100% on html and body
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post 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?
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post by daedalus__ »

expanding to fit whatever is in it? that's default behavior.
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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. :banghead:

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?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post by daedalus__ »

block level elements are the width of their parent by default.
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post 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.
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Div refuses to acknowledge child divs

Post 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/
Teonnyn
Forum Commoner
Posts: 58
Joined: Tue Dec 23, 2008 4:07 am

Re: Div refuses to acknowledge child divs

Post by Teonnyn »

YES! Thank you! Jubilation! :mrgreen:
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. :crazy:
Post Reply