Jump to content
Sign in to follow this  

Need suggestions on how to manage grid layout

Recommended Posts

Hello everyone :)

I am working on a grid type layout and really having troubles and hoping someone might be able to help.

The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.

I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.

Attached is a very basic example of what I am trying to achieve.

Thanks in advance.


Share this post

Link to post
Share on other sites

Here's a really rough version of a layout like this, that's compatible in older browsers. I would consider refactoring my class names because the code isn't very re-usable, and likely won't fit within the naming you have currently. Hopefully you can see what's going on though.


Share this post

Link to post
Share on other sites

You want to divide your pages up into sections with the background colours on them.  Then inside of each section you put a grid.  You can have as many grids as you like on a page and nest grids within grids.
Feel free to use the grid in Nebula https://nebulaui.github.io/nebula/api/objects/grid?GridActiveTabId=html

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Luke Ottey
      @Seth and I are working on a website that uses Envira-gallery and are unable to use CSS code to move the image caption (which is currently located in a white font in the top left) of the front-page gallery images to below the bottom border of the image (in order too see the caption you have to first click on the image). We are looking for a way to center the caption below the image in the same spot regardless of what the viewport size is. Here is a link to the page: https://webdesignstaging.site/firstfloorflow/
      Any help would be wonderful, thanks so much!
    • By carloswebwdf
      Hello !!
      Following the instructions from the site 'W3Schools', I created one dropdown menu in javascript, like shows in the link below:
      But what I need, for exampple, after click in the button and show de list, at mouseover on the link 'Link2' for example, shows another list in the right
      side with more link options !!
      How Can I do that ??
      Wating answer...
    • By Mario89
      I created my first website. Please tell me, what can I change and improve?
    • By rookie
      I’m very curious about this topic cause the definition of web designer is different from country to country, for example some countries define a web designer as a person who knows design and programing (Javascript and php etc).
      I wanna know where you are from and which language you need to be web designer like the following.
      Country   :  Japan
      Language:   HTML,CSS,*JavaScript, *wordpress 
      *As to JavaScript, you don’t have to know everything about it but at least how it works. 
        Plus you basically just need to know how to customize jQuery.
       I really wanna know to what extent I should learn JS or php if I need to learn them as web designer in some countries.
      Thanks in advance for your help ! 
    • By Seth
      Trying to get the outside border to go around all the copy including the bullets. What am I missing here?
      <html> <head> <title>fancy box 2 column bullet list</title> </head> <body> <div style="border: 1px solid #41b6e6; padding:0px;">     <div style="background: #41b6e6; color:#fff; font-weight:bolder;">SMI Network Security Services</div>     <div>Some of the key services we provide to help you address your security needs include</div>     <div style="width:50%; float:left;">         <ul>             <li>Vunerability Management</li>             <li>Web Application Security/Firewall</li>             <li>DDoS Monitoring & Mitigation</li>             <li>Real-time Log Flow Analaysis</li>         </ul>     </div>     <div style="width:50%; float:left;">         <ul>             <li>Event Log Management</li>             <li>Managed Cloud Security</li>             <li>Network-Based Security & Protection</li>         </ul>     </div> </div> </body> </html>  
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts