PDA

View Full Version : Containers not working


iLikePie
June 2nd, 2006, 02:20 AM
hi,

i'm building a CSS layout that's relatively simple in that it's MEANT to be quite geometric... the box model really suits it.

however, i'm getting a strange result i don't understand.
I have an overall container of 750px width.
then i have (within that) a nav container thats floated left, 150px width, 650px high.

However, the nav container has a number of 150px squares inside it (created with divs) and i expected that after 650px down they'd not be visible (because of the nav container) but they just keep going.

here's some code...



#stucontainer{
width:750px;
margin:0px auto;
text-align:center;
background-color:#a7cceb;

}

#stunavigation{
text-align:right;
margin:0px auto;
width:150x;
height:650px;
background-color:#fff;
}

and so within stunavigation, the stuff itsn't being contained properly, it's like the squares aren't actually inside the nav div (but they definitely are). The outside container works...

oh and i might as well ask this side note while i'm here... if i changed the #stunavigation height to, lets say, 80%, it doesn't do it. any obvious reason why?

if you can sort through all that, i'm muchly in your debt.
- stu
simplistik
June 2nd, 2006, 01:43 PM
:lol: can you post your html too and a screen shot of what it's doin... things like that help emensly :D
iLikePie
June 2nd, 2006, 10:11 PM
ok here's the html

<body>

<div id="stucontainer">

<div id="stunavigation">
<div id="stumenu"><a href="index.html">Menu</a></div>
<div id="stu3d"><a href="3d.html">3D Animation</a></div>
<div id="stuvideo"><a href="video.html">Video</a></div>
<div id="stuphoto"><a href="photo.html">Photography</a></div>
<div id="stuflash"><a href="interactive.html">Flash</a></div>
<div id="stugraphic"><a href="graphic.html">Graphic Design</a></div>

</div>

<div id="stucontent">
<p>Interactivity plays a major role in multimedia design. blah blah blah olor sit amet, consectetuer adipiscing elit. Donec non orci. Maecenas vel eros. Integer vitae nisl. Nunc ultrices libero in sapien. Vestibulum facilisis commodo nisl. Maecenas dolor diam, tincidunt non, fringilla vel, lacinia mauris.</p>

</div>
</div>
</body>
</html>


and heres the CSS:


body{
text-align:center;
padding:0px;
margin:0px;
background-color:#fff;

}

#stucontainer{
width:700px;
margin:0px auto;
text-align:left;
background-color:#a7cceb;

}

#stunavigation{
text-align:right;
padding:0;
float:left;
width:100px;
height:450px;
background-color:#fff
}

#stumenu, #stu3d, #stuvideo, #stuphoto, #stuflash, #stugraphic{
height:100px;
width:100px;
}


#stumenu{

background-color:#a7cceb;

}

#stu3d{

background-color:#d2d7b9;

}

#stuvideo{

background-color:#afaa98;

}

#stuphoto{

background-color:#87ab9c;

}

#stuflash{

background-color:#644e61;

}

#stugraphic{

background-color:#888888;

}

#stucontent{
width:600px;
background-color:#a7cceb;
float:right;
padding: 0px;

}

so the colored squares are the divs "stu3d" "stuvideo" etc, and they each are 100px square. They are inside the 'stunavigation' div, so theoretically should be constrained by that, right?

but they're not (see screenie)
kathari
June 3rd, 2006, 07:21 AM
Without really having looked at this, I think that they won't be constrained by the parent div unless you set the overflow to invisible.
Just like if you have two div's (beside each other) inside a wrapper div and you happen to make their added widths larger than the wrapper div. They would show anyway.
iLikePie
June 3rd, 2006, 09:42 PM
really, i thought that they didn't, which was the point of having an overall container/wrapper.

but i'll try that and see if it works.

EDIT: Cool, when i add "overflow:hidden" then it works like i expected. Thanks for that, i hadn't heard of that property before.
kathari
June 4th, 2006, 02:31 AM
=) Just for curiosity.. Why would you consciously want to place plenty too many little boxes?? Isn't it better to take them away?=)
iLikePie
June 4th, 2006, 08:29 AM
heh, yeah you're right.

the reason i asked the question is because once i encountered the problem, i was curious as to why it didn't work like i expected. I actually wanted the boxes to be % values so they scaled with the navigation div, and it didn't work like that, which was when i noticed the problem :)

i figure its a good thing to know, and i couldn't have worked it out myself really.