Problem with positioning

I am having problems with the positioning of the main content box in a pure CSS design. This is my first real attempt at at tableless design so i'm having a problem or two.

I have positioned the main content box in the following way:

#main {
margin-top: 7px;
background-color: #0000FF;
width: 550px;
position:absolute;
margin-left: 174px;
margin-right: 162px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 174px;
margin-right: 162px;
}

Code (markup):

The two navigation boxes are positioned on either side of it with float:right and left.

The main div displays as intended in Firefox, but in IE the main div is mis-positioned.

I have also specified a fixed with for the main div as setting it to 100% causes it to span the whole page and not the container div it is in.

Here is an the page:
http://69.41.171.40/dan/new/test.php

 

Try This

#main {
margin-top: 7px;
background-color: #0000FF;
width: 550px;
}

Code (markup):

You don't need absolute positioning here. just float one in left,leave the middle one as it is and float the last one to the right

 

The main div is now pushing down the right nav box. You can see here:
http://69.41.171.40/dan/new/test.php

Also, is there any way of getting around the fixed width div? I would like the div to be as wide as the space between the two nav boxes.

Thanks.

 

to make the main (centre) div be fluid and not have a specified width you have to alter your css to something like this:

#bqcontainer {
position:relative;
width: 70%;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
margin: 0px auto;
height: 1000px;
background-color: #fff;
}

#leftnavdiv {
width:150px; /*whatever you prefer */
position:absolute;
left:0;
}

#rightnavdiv {
width:150px; /* whatever you prefer */
position:absolute;
right:0;
}

#centrediv {
margin-left:150px; /* can be bigger if you want a margin between */
margin-right:150px; /* can be bigger if you want a margin between */
}


and your HTML set up like this

<div id="bqcontainer">
<div id="leftnavdiv">aa</div>
<div id="rightnavdiv">cc</div>
<div id="centrediv">bb</div>
</div>

 

Thanks guys, works fine now!

 

If you want the main to automatically change its size so as to fit between the two bars try this

#main {
margin-top: 6px;
margin-left: 0px;
margin-right: 154px;
background-color: #0000FF;
}

Code (markup):

and also put the div "rightbar" before "main" like this in your html code

                         <div id="rightnav">
				<div class="box">
				<img src="img/boxes/bulletins.png" alt="Bulletins"/>
				....................................................... laborum.
				<img src="img/boxes/bottom.png" alt="" />
				</div>
			</div>
			<div id="main">
			main content
			</div>

Code (markup):

 

I have one similar problem but I can't post my link for your analyze. I tried some solutions with clear class, with some javascripts but no results.
I think it's something wrong on my code but I don't know where I mistake.

Thanks,
Cr0n

 

I've added my css code problem related in previous post.
My wrapper is:

.contents {
	height: 100%;
	width: 824px;
	margin-left: auto;
	margin-right: auto;	
	text-align: left;
}

Code (markup):

My left column is:

#left {
	float: left;
	width: 175px;
	min-height: 100%;	
	background: #fff;
	color: white;
	border-right: 2px solid #e9e9ea;
}

Code (markup):

My right column is:

#right {
	float: right;
	width: 175px;
	min-height: 100%;	
	background:#fff;
	border-left: 2px solid #e9e9ea;
} 

Code (markup):

The middle column is:

#middle {
	float: left;
	position: relative;
	min-height: 100%;
	width: 468px;
	background: #fff;
}

Code (markup):

I've tried more javascript solution, I've used one clear class
.

clear {
  	clear: both;
  	height: 0;
  	overflow: hidden;
	line-height: 0;    
	border: 0
}

Code (markup):

but no results.

I think I have one placement error for my columns, but I can't see where is my mistake.
The code location is http://www.noemisworld.com/new_site/

 

In your html code put the divs in this order

<div id="contents">
   <div id="left">
   </div>
   <div id="right">
   </div>
   <div id="middle">
   </div>
<div class="clear">&nbsp</div>
</div>

Code (markup):

And in your css code put this

#contents {
	width: 830px;    /* It should be large enough to accomodate its contents*/
	margin-left: auto;
	margin-right: auto;	
	text-align: center;
	border: 1px solid green;
}
#left {
	float: left;
	width: 175px;
	background: #fff;
	
	border: 2px solid #e9e9ea;
}


#right {
	float: right;
	width: 175px;	
	background:#fff;
	border: 2px solid #e9e9ea;
}



#middle {
	
	
	width: 468px;
	background: #fff;
}

Code (markup):

TIP If you have problems with alignment stuffs always put borders on your divs and you will see the problem..

If you still have problem PM me your link . It would be easier to check it out directly...
Nwk