The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Mixed centered and full width?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #243547

    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


    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


    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.