Mixed centered and full width?

[pctechtv]

I am interested in having a page that has a full width bar at the top. It will contain a centered navigation list. On this page I want a full width gradient with a centered set of content in the middle of the page. I want to use images that will blend in to my gradient nice. The image blends I can handle. I don’t know if my ideas for laying out the elements to be used by CSS is a good idea. Can anybody suggest a best practice or a good way to do this? Thanks

http://codepen.io/pctechtv/pen/RRjaqr

[Atelierbram]

Maybe consider a div, a direct child of body that wraps all of the content, and put this gradient on that page-wrap, with the addition of that white top background-color for the nav in the gradient:

.page-wrap {
  min-height: 100%;
  min-height: 100vh; 
  background: linear-gradient(to bottom, #fff, #fff 65px, rgba(100,175,35,1) 0, rgba(118,182,175,0) 71%, rgba(125,185,232,0) 100%); 
}

My fork of your demo

[pctechtv]

Just want to say I have no intentions to not respond. I have so much work I sometimes don’t get back to posts in a reasonable amount of time. However you are absolutely correct that I should do better. As for your method to solve the centered and full with in one. I liked it, logged it in my notes as consideration for the page. I just went with having my div’s at the top and using absolute positioning to move them where I need. Thanks

[Author]

Posts