annoying divs problem

[ringo747]

hi guys, want to have 3 box sections side by side on a webpage... i have created a contain div with 3 child divs nested inside it..

i want to be able to center the container so that all 3 are evenly spaced out across the page.

this is what i have so far.. it all aligns to the left.

(testing it in firefox)

<div id="main">
  <div id="leftbar"></div>
  <div id="content"></div>
  <div id="rightbar"></div>
</div>

css is as follows

body {
	background-color:#FFFFFF;
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size:smaller;
	text-align: center;
}

#header {
	width:60%;
	height:80px;
	border-style:solid;
	border-width:1px;
	border-color:#C0C0C0;
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	text-align: left;
}

#main {
	width: 80%;
	border: 1px solid gray;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

#content {
	padding: 20px;
	margin-left: 0;
	margin-right: 0;
	background-color: gray;
}

#leftbar {
	float: left;
	width: 15%;
	margin: 0;
	margin-right: 20px;
	padding: 20px;
	background-color: rgb(235, 235, 235);
}

#rightbar {
	float: right;
	width: 15%;
	margin: 0;
	margin-left: 20px;
	padding: 20px;
	background-color: rgb(235, 235, 235);
}

Any help would really be appreciated.. im kinda a css beginner and tryin to cope with browser inconsistencies is annoying!

 

[HTMLHugo]

im not an expert at css but if you change your html to this ?

<pre>
<div id="main">
<div id="leftbar">cz</div>
<div id="rightbar">czx</div>
<div id="content">czx</div>
</div>
</pre>

 

[BeatMaster]

This should hopefully solve the problem

<div id="main">
  <div id="leftbar"></div>
  <div id="rightbar"></div>
  <div id="content"></div>
</div>

/* CSS Document */

body {
	background-color:#FFFFFF;
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size:smaller;
	text-align: center;
}

#header {
	width:60%;
	height:80px;
	border-style:solid;
	border-width:1px;
	border-color:#C0C0C0;
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	text-align: left;
}

#main {
	width: 80%;
	border: 1px solid gray;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

#content {
	padding: 20px;
	width:50%;
	background-color: gray;
	margin-left:auto;
	margin-right:auto;

}

#leftbar {
	float: left;
	width: 15%;
	margin-right: 20px;
	padding: 20px;
	background-color: rgb(235, 235, 235);
}

#rightbar {
	float: right;
	width: 15%;
	margin-left: 20px;
	padding: 20px;
	background-color: rgb(235, 235, 235);
}

Tested in Firefox 2 and Internet Explorer 7

BeatMaster

 

[ringo747]

thanks very much guys... that worked!

I think it was the order i put the divs in the html for started and then a few probs in css too.

For margins is it better to use px or %?

Any other basic css tips??

Thanks again

 

[Augmented]

For margins is it better to use px or %?

Neither. It depends what your design requires. px is a fixed unit, while % is proportional/fluid. I'd say, however, in most cases you'll want to keep your margins fixed and let the content be fluid.

Look at using the em unit if you're interested in proportional and fluid layout - layout sizing become relative to the scale of the content.

Any other basic css tips??

Looking at your CSS posted here, you could benefit from becoming familiar with the various shorthand ways to set properties. For example,

	margin: 10px;
	margin-left: auto;
	margin-right: auto;

can be condensed to:

margin: 10px auto;

456BereaStreet, as ever, has an excellent article on this topic .

 

[ringo747]

cheers pal, very helpful


one more thing... i will be using the same nav bars on each page on my site.. is there anyway i can create these navbars separately and then call them into each page?

Im thinking along the lines of an 'include'

Know nothing about it tho!

 

[HTMLHugo]

yes you can do dont have any code for you cos im not sure which language your using.

i often split up into includes that way if you change the left navigation etc it changes on all pages makes it much more efficient to edit

 

[blade007]

I've started splitting stuff up into includes, specifically, a footer, and menu (it's a pig to re-url a html menu in every page)

I'm usin php includes. - doddle to use.

 

[ringo747]

ok thanks for that.. is that something similar to using templates to populate content in pages?

If I am using php includes does my file have to be called index.php or can it be index.html and just embed php inside of it?

Cheers guys