Need some CSS help

**StephenJ** · 05-02-2008, 09:57 PM

I've been trying hard to get my site done. I have one problem though with floats.

body
{
margin-top: 10px;
margin-bottom: 10px;
font-family: Verdana;
font-size: 11px;
color: #000000;
}
#main_container
{
border: 15px solid #1A5B86;
padding: 1px;
padding-bottom: 0px;
width: 928px;
margin-left: auto;
margin-right: auto;
background-color: #CEDCE5;
}
#header
{
border: none;
padding: 0px;
width: 928px;
height: 120px;
background-image: url('../images/header_main.png');
}
#logo
{
border: none;
padding: 0px;
vertical-align: middle;
float: left;
background-image: url('../images/logo.png');
width: 292px;
height: 59px;
margin-top: 30px;
margin-left: 30px;
}
#header_right
{
border: none;
padding: 0px;
width: 400px;
height: 120px;
background-image: url('../images/header_right.png');
float: right;
}
.horizontal_separator
{
height: 1px;
}
#navigation_container
{
width: 928px;
border: none;
padding: 0px;
}
#navigation_main
{
width: 908px;
height: 20px;
border: none;
padding: 10px;
background-color: #134860;
}
#navigation_sub
{
width: 906px;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #134860;
padding: 1px;
background-color: #FFFFFF;
}
#content_container
{
width: 928px;
border: none;
padding: 0px;
}
#component
{
width: 700px;
border: none;
padding: 0px;
float: left;
}
.contentpaneopen
{
background-color: #FFFFFF;
border: 10px solid #1A5B86;
padding: 1px;
width: 700px;
}
#modules
{
border: none;
padding: 0px;
float: right;
}
.search
{
background-color: #FFFFFF;
border: 10px solid #1A5B86;
padding: 1px;
width: 205px;
}

Is my css.

Basically, it works in IE (I still can't believe that) but not in Firefox. #main_container won't expand/get bigger/go down with the page in ff.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<title>itsStephen - <?php echo $this->title; ?></title>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
<div id="logo">
</div>
<div id="header_right">
</div>
</div>
<div class="horizontal_separator">
</div>
<div id="navigation_container">
<div id="navigation_main">
</div>
<div id="navigation_sub">
</div>
</div>
<div class="horizontal_separator">
</div>
<div id="content_container">
<div id="component">
<jdoc:include type="component" />
</div>
<div id="modules">
<jdoc:include type="module" name="search" />
</div>
</div>
</div>
</body>
</html>

Is my index page (oh by the way, I'm using Joomla).

Anyone know how I can fix it? Never had this problem before, and I wanted to get my site done over the weekend! The main box doesn't expand with the components and modules. Oh and when I don't have it floating it will work and expand, it just doesn't show side by side, it shows underneath, so if anyone can tell me something I could use besides floats, it would also be nice!

**maksam** · 05-03-2008, 10:41 AM

try

#main_container
{ absolute
border: 15px solid #1A5B86;
padding: 1px;
padding-bottom: 0px;
width: 928px;
margin-left: auto;
margin-right: auto;
background-color: #CEDCE5;
}

**StephenJ** · 05-04-2008, 01:39 AM

That's not going to do anything, did you mean position: absolute?

Anyway, tried almost everything, somehow it doesn't work, Joomla adds thousands of tables to it so I decided to just use a table with 2 cells, I know I shouldn't but anyway...

**Alan B** · 05-04-2008, 10:57 AM

I'm not clear what you're trying to achieve, as you haven't offered much explanation. Where do you expect DIV#logo to appear? If you want it to float to the left of DIV#main_container, then in the HTML DIV#logo must occur before DIV#main_container.

If you want further help, you should post a URL of the page. Also, when trying to troubleshoot CSS code, you're best to remove elements that aren't part of the issue; a simplified example is easier to diagnose.

Thread: Need some CSS help

LinkBack

Thread Tools

Display

Need some CSS help

Posting Permissions