Center div within 100% width div?

You need to set a width the the headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.

Up vote 0 down vote favorite share g+ share fb share tw.

I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout. It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine.

The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers. So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%.

And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div. I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.

Here's the html: TJÄNSTER KUNDER OM OSS KONTAKT Logga in And here's the css for header and headercontent: #headerContent { overflow: auto; zoom: 1; margin: 0 auto; } #header { width: 100%; position: relative; margin-bottom: 0px; color: #000; margin-bottom: 0px; overflow: auto; zoom: 1; } The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem. Any ideas what I'm doing wrong? Css div center link|improve this question asked Jul 15 '11 at 14:20Anders Svensson86611046 73% accept rate.

You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.

Actually, that's not the problem, the span-24 class gives it a 950px width. I mentioned that it had that, but forgot to mention where it comes from. This is part of the Blueprint framework.

I found the solution however, I'll post it shortly. – Anders Svensson Jul 15 '11 at 14:33.

Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked: @Html. Raw(Html.Menu()) @Html.

Partial("_LogOnPartial") I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.