How to put all page content in center layout (including title and breadcrumbs)

Jordan Packer

I'm trying to replicate a few of the CSS styling features of the old Atlassian documentation (like this page, for example: https://confluence.atlassian.com/display/BAMBOO044/Getting+started+with+Java+and+Bamboo). I've figured out most things, but one thing that I can't figure out is how to get all of the page content in the center. I know that I can edit a page and choose different layouts, but that only applies to the content and not the title/breadcrumbs. How do I get it to look just like the Atlassian documentation with everything in the center?

image2015-12-14 15:56:49.png

Update

Here is the CSS I have applied to my space:

@import url(https://fonts.googleapis.com/css?family=Oswald);  
  
#title-text a{  
    font-family: 'Oswald', sans-serif;  
    font-size: 48px;  
    color: #3B73AF !important;  
}  
  
.page-metadata{  
    opacity: 0;  
    transition: opacity .25s ease-in-out;  
    -moz-transition: opacity .25s ease-in-out;  
    -webkit-transition: opacity .25s ease-in-out;  
}  
  
.page-metadata:hover{  
    opacity: 1.0;  
}  
  
#main{  
    margin: 0 auto;  
    width: 940px;  
    border: 0;  
    padding: 20px;  
    min-height: 40em;  
    clear: both;  
    background: white;  
    display: block;  
    position: relative;  
}

And here is what my "main" div looks like:

image2015-12-15 9:7:55.png

And yet I want it to look like this:

image2015-12-15 9:9:13.png

Why is it that theirs makes space for the left navigation panel and mine doesn't?

image2015-12-15 9:7:55.png

Progress Aug 2016.png

image2015-12-14 15:56:49.png

image2015-12-15 9:9:13.png

Steffen Heller

Hi,

the way the page is built up is this:

There is an area <div id="main"> that contains all the content and this area is defined as having a fixed width and being centered with "margin: 0 auto;".

If you rebuild that you should get it going.

There is an interesting description at http://learnlayout.com/margin-auto.html