DEV Community

lolleri200
lolleri200

Posted on

Need help with CSS positioning

I need help with positioning the two containers so they are aligned with the nav and footer sections. Here are the HTML and CSS code: https://codepen.io/Sampsa96/pen/jOWeVva

Top comments (5)

Collapse
 
lolleri200 profile image
lolleri200 •

Ended up fixing the issue modifying the #Page in CSS like this:

page {

width: 1080px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
background-color: #D8CCAF;
}

Collapse
 
nardove profile image
Ricardo Sanchez • • Edited

Hi,

I think you are trying to aling both divs to the left, if that is the case then:

Try making the content div a display grid, like so

display: grid;
grid-template-columns: 1fr;

and add the footer as a child to the content div should do the trick.

But you may need to keep adjusting as you build along, hope that helps.

Collapse
 
lolleri200 profile image
lolleri200 •

So where exactly I add these grids? Can you give an example?

Collapse
 
nardove profile image
Ricardo Sanchez •

You have a div with an id of content correct. Well just add the css code I mention to that div, hope that makes sense.

Collapse
 
erimeri profile image
Erkand Imeri •

Use flexbox man, you have tons of examples how to do this kind of layouting.