We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
CSS Container DIV; Having a dilemma here!
Topic Started: Sep 28 2008, 09:16 AM (191 Views)
Dunno?-ZNR
Member
[ *  *  * ]
Hi folks, I don't know if this is allowed here; if not please feel free to close it and point me in the right direction!

I basically have a container DIV on my webpage to hold menus, content boxes, banners, etcetera. In IE7, this works seems to work fine, although in FireFox 3, the container DIV will not extend to capacitate the DIVs inside it; here is my CSS coding:
Code:
 
@charset "utf-8";
/* CSS Document */

#container {
width:740px;
height:100%;
margin: 2em auto;
background: #4B5BA0;
margin-top: 5px;
border:1px solid #000;
}
* html #container {
height : 100%;
}

#banner {
width: 600px;
height: 100px;
margin-left:120px;
margin-top:8px;
margin-bottom:2em;
background-image:url(Images/Banner4%20copy.jpg);
}
/***********#date {
width:277px;
height:27px;
position: absolute;
left: 447px;
top: 100px;
}*********/
#navigation {
width: 180px;
height:400px;
background: #FFF;
border:1px solid #A9A9A9;
float:left;
display:inline;
margin-left:20px;
margin-top:28px;
margin-bottom:14px;
}
#content_home_box1 {
margin-top:28px;
width: 490px;
background:#FFF;
float:right;
display:inline;
margin-right:20px;
margin-top:28px;
margin-bottom:14px;
border:1px solid #A9A9A9;
height:140px;
}
#content_home_box2 {
margin-top:28px;
width: 490px;
background:#FFF;
float:right;
display:inline;
margin-right:20px;
margin-top:30px;
margin-bottom:14px;
border:1px solid #A9A9A9;
height:140px;
}


and my HTML:
Code:
 
<div id="container">
<div id="banner"> </div>
<div id="date"><script type="text/javascript" src="tdate.js"></script></div>
<div id="navigation"> </div>
<div id="content_home_box1">hi</div>
<div id="content_home_box2">hello</div>
</div>


Help is very much appreciated! Thank you. :)
Offline Profile Quote Post Goto Top
 
Aetheria
Member Avatar

[ *  *  *  *  *  *  *  * ]
Quote:
 
the container DIV will not extend to capacitate the DIVs inside it; here is my CSS coding:


and it shouldn't either. divs aren't meant to do that.

you should set the containter's width to the correct size in the first place.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Technology Chat · Next Topic »
Add Reply