Help with CSS Layout

danburzo · #1 (**permalink**) May 21st, 2005, 09:53

I have some nested divs:

<body>
<div id="page">
   
   <div id="main">
      <div id="content">...</div>
      <div id="right">...</div>
   </div>

</div>
<div id="footer">...</div>
</body>

to which i've applied the styles:

Code: Select all

body {
	text-align: center;
	background: #2E2E2E;
	margin: 0;
	padding: 0;
}

#page {
	width: 750px;
	margin: 0px auto;
	text-align: left;
	background: #FFFFFF;
	}

#main {
	width: 750px;
	background: #FFFFFF;
}

#content {
	width: 510px;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #FFFFFF;
}

#right {
	width: 159px;
	float: left;
	color: #C03400;
	border-left: 1px dotted #333333;
	padding:20px;
	background: #FFFFFF;
	}

note that the background color of the page is a dark grey. I want the whole "main" div to have a white background. I've set background:#ffffff, as you see, but it only works in IE.

How can i make it work in Firefox?

danburzo · #2 (**permalink**) May 21st, 2005, 10:18

Here are some screenshots:

in firefox:

in IE:

so. i want it to look like in IE.

D3mon · #3 (**permalink**) May 21st, 2005, 14:27

put something that 'clears' both the floats at the very bottom the DIV#main like:

Code: Select all

<body> 
<div id="page"> 
    
   <div id="main"> 
      <div id="content">...</div> 
      <div id="right">...</div> 
      <div style="clear:both;"></div>
      </div> 

</div> 
<div id="footer">...</div> 
</body>

Of course, Firefox is making the correct interpretation of the CSS. IE is doing what it thinks the code should look like.

D3mon · #4 (**permalink**) May 21st, 2005, 14:36

Here's somthing to think about:

where you have

Code: Select all

   padding-left: 20px; 
   padding-right: 20px; 
   padding-top: 20px; 
   padding-bottom: 20px;

you can 'shorthand' this to:

Code: Select all

   padding: 20px;

Where only one value is given, it applies this values to all sides.

Where two values are given, it applies the first value to top and bottom, and the second value to left and right.

ex. padding: 20px 50px;

Where three values are given, it applies the first value to the top, the second value to left and right, and the third value to the bottom.

ex. padding: 20px 10px 50px;

Where four values are given, it applies the first value to the top, the second value to the right, the third value to the bottom and the fourth value to the left;

ex. padding: 20px 50px 30px 10px;

this is the same for margin too.

danburzo · #5 (**permalink**) May 22nd, 2005, 06:45

Still doesn't work...

About the margins and padding, i know there is a shorthand version, but i never remember which side is which in the series of numbers... :P Thanks for the tip.

danburzo · #6 (**permalink**) May 22nd, 2005, 06:51

Oh wait i found it...
The .clear div has to contain some data in order to be applied... i think

Code: Select all

<div class="clear"></div>

and the style was

Code: Select all

.clear {
	clear: both;
	font-size: 2px;
}

Thanks again!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS layout	casho	Web Page Design	4	Feb 10th, 2008 13:59
Layout using CSS	Madball	Web Page Design	5	Nov 7th, 2007 09:41
New to CSS Layout	tapster	Web Page Design	15	Oct 15th, 2007 10:18
Fluid layout - IE6 clichés the layout when resizing	cyberseed	Web Page Design	7	Jun 16th, 2007 05:14
What makes a layout a good layout?	Miles Lombardi	Graphics and 3D	4	Jul 26th, 2005 03:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help with CSS Layout