-1

Is there any way to center the holy grail layout in the browser window HORIZONTALLY? But keep the vertical flex of the columns?

https://jsfiddle.net/z1ne9aah/

Here's my CSS

@charset "utf-8";
/* CSS Document */

body,td,th {
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

.HolyGrail,
.HolyGrail-body {
    display: flex;
  flex-direction: column;
 background: #DF191C
}

.HolyGrail-nav {
  order: -1;background: #2E3D6E
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;background: #2C9F23
  }
  .HolyGrail-content {
    flex: 1;
      background: #D440CA
  }
  .HolyGrail-nav, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
      background: #A2A115
  }
}

and my HTML

<body class="HolyGrail">
  <header>HEADER</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">CONTENT</main>
    </main>
    <nav class="HolyGrail-nav">NAVIGATION</nav>
    <aside class="HolyGrail-ads">ASIDE</aside>
  </div>
  <footer>Footer</footer>

fiddle https://jsfiddle.net/z1ne9aah/

much obliged

jefferson
  • 1
  • Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – jhpratt Aug 22 '17 at 03:04
  • It is unclear what it is you want. Please provide additional info, and a drawing showing the expected output would be great. – Asons Aug 22 '17 at 07:28

2 Answers2

0

I hope i don't misunderstand your meaning and sorry for my bad English, just add text-align:center to your body in css.

alvin
  • 112
  • 1
  • 8
0

So I got my Header, two column, footer flexbox figure out

CSS

/*color and size*/

.parent {
    #border: 5px solid red;
    width: 1020px;
    margin:0 auto;
}


.header {
    #border: 5px solid purple;
    #height: 150px;
    #width: 1000px;
}
.two_column {
    #border: 5px solid green;
    #width: 1000px;
    #height: 700px;
}

.footer {
    #border: 5px solid orange;
    #height: 150px;
    #width: 1000px; 
}

.nav{
    #border: 5px solid yellow;
    width: 200px;

}

.content{
    #border: 5px solid black;
    width: 900px;

}

/* positioning*/

.parent{
    display: flex;
    flex-direction:column;
    #align-items: center;
}

.two_column{
    display: flex;
    justify-content: flex-start;            
}

.content{
    display: flex;
    width 750px;
    height: 1000px;

}
jefferson
  • 1