Hi,

 

Someone please help.

 

I'm trying to center a div with a fixed width of 1000px within a div container with a width of 100%. I assumed that i could just put the margins to auto for the inner div, but this doesn't seem to work.

 

Can someone please help. What would my CSS need to look like to make this work?

 

Thank you!

Hi. Your assumption is correct.

#outerDiv {
	width:100%;
	background:blue;
}
#innerDiv{
	width:1000px;
	height:200px; /*or whatever*/
	margin:auto;
	background:red;
}

Check your HTML for errors and make sure your divs are not floating or inheriting absolute/fixed positions propperties.

This is the CSS code I have used, but its not working:

 

#lowercontain{
    background-image: url(../images/lowerbg.jpg);
    background-repeat: repeat;
    height: 430px;
}

#lower1{
    width: 1000px;
    background-image: url(../images/lower1.jpg);
    height: 172px;
    margin:auto;
}
 

 

 

Here's my web page: http://www.contractflooringjournal.co.uk/fluid/

 

I guess it has something to do with that I have used a Fluid grid using Dreamweaver. If you can help solve this I would be very grateful.

 

TY

 

Neil

Edited August 3, 201313 yr by teodora
Wrapped your code.

Maybe try this and adjust the margins to suit:

 

#lowercontain{
    background-image: url(../images/lowerbg.jpg);
    background-repeat: repeat;
    height: 430px;
    position:relative;
}

#lower1{
    width: 1000px;
    background-image: url(../images/lower1.jpg);
    height: 172px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-86px; // Half of the height
    margin-left:-500px; // Half of the width
}
 

Edited August 3, 201313 yr by teodora

This is the CSS code I have used, but its not working:

 

#lowercontain{
    background-image: url(../images/lowerbg.jpg);
    background-repeat: repeat;
    height: 430px;
}

#lower1{
    width: 1000px;
    background-image: url(../images/lower1.jpg);
    height: 172px;
    margin:auto;
}
 

 

 

Here's my web page: http://www.contractflooringjournal.co.uk/fluid/

 

I guess it has something to do with that I have used a Fluid grid using Dreamweaver. If you can help solve this I would be very grateful.

 

TY

 

Neil

 

remove your floats.

 

add

 

float: none;

to this

#lower1{
    width: 1000px;
    background-image: url(../images/lower1.jpg);
    height: 172px;
    margin:auto;
    float: none;
} 

 

 

Also, you had a minor error in one of your scripts - an extra quote so as causing a few issues later on down the page.

<script src="http://feeds.feedburner.com/cfjforum?format=sigpro&excerptLength=70" " type="text/javascript" ></script><noscript>

Are you trying to position the background image correctly or more so the #lower1?

 

remove your floats.

 

add

 

float: none;

to this

#lower1{
    width: 1000px;
    background-image: url(../images/lower1.jpg);
    height: 172px;
    margin:auto;
    float: none;
} 

 

Perfect thank you!

Also, you had a minor error in one of your scripts - an extra quote so as causing a few issues later on down the page.

<script src="http://feeds.feedburner.com/cfjforum?format=sigpro&excerptLength=70" " type="text/javascript" ></script><noscript>

Are you trying to position the background image correctly or more so the #lower1?

 

 

Well spotted, thank you!