[SOLVED] DIVs and Firefox - help!

Emzi · #1 (**permalink**) Oct 4th, 2007, 09:57

Hiya all.

I'm setting up a dummy website at the moment and I have 2 DIVs with a main DIV.

The main DIV I want to have a border and background colour that stays in effect with the 2 DIVS within it. (Basically to have the page with a nice border around it and background colour etc.)

This works fine in IE, but in FireFox it doesn't want to know. The main DIV seems only to want to be 150px in height and doesn't fill the whole page like it does in IE. I've tried adding the style height: 100% and other various variables but it doesn't seem to work.

I don't want to have to use a table to do this

Anyone know what I can do??

Code is this if it helps:

HTML: Select all

<div style="width:750px; margin:auto; border: 1px solid #000000; background-color: #0033FF;">
 
<div style="width:auto;margin:10px;">
 
<div>
CONTENT HERE
</div>
 
</div>
 
</div>

welshstew · #2 (**permalink**) Oct 4th, 2007, 10:01

Hiya emzi,

First check the stickies at the top of this css forum for excellent resources and tutorials

These will go a long way to building your knowledge.

I'll have a look at your specific code in a mo for you.

welshstew · #3 (**permalink**) Oct 4th, 2007, 10:10

Is this the type of thing you were after

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>emzi 2 column layout</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial;
color: black;
background-color: blue;
text-align: center; /* centering the content for IE6 */
}
#wrapper {
display:table; /* must put this in for FireFox. */
width:650px;
margin:auto; /* for IE6 and Firfox centering */
text-align:left; /* so that IE6 and Firefox puts the text to the left
*/
border:1px solid red;
background-color: white;
height:400px; /* Have to put somehting in here for the height for both
browser. DO NOT put in a percentage, must be a pixel value */
}

#sidebar {
float:left; /* float the menu to the left */
width:150px;
background-color:#e6e6cc;
border:1px solid red;
height:100%; /* so the menu has the height of the main content and
visa versa */
}

#main {
float:right; /* float the content to the right */
width:490px;
border:1px solid green;
height:100%;/* so the content has the height of the menu and visa
versa */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<h2>Menu</h2>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div id="main">
<h2>Main Content</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</html>

Emzi · #4 (**permalink**) Oct 4th, 2007, 10:15

Wow thanks for that. You went to alot of trouble to do that and I appreciate it

I looked at your code and the thing that I needed was the 'display: table' attribute, and now it works fine!

Thanks alot for your help, it's much appreciated

welshstew · #5 (**permalink**) Oct 4th, 2007, 10:42

cool, apologies for the overkill, wa a bit confused by your "two divs in one div" but glad you got it sorted

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] how to put divs next to each other	lostboys	Web Page Design	9	Jan 13th, 2008 20:47
Divs in IE and Firefox	Slimane	Web Page Design	6	Sep 24th, 2007 14:07
IE 7 vs Firefox & extra space between divs	Kurt	Web Page Design	4	Sep 20th, 2007 21:26
Problem with Firefox divs...	WillRevera	Web Page Design	3	Aug 31st, 2007 16:29
Floated Divs dont expand centered div in firefox	mikka23	Web Page Design	7	Jan 1st, 2007 01:17

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] DIVs and Firefox - help!