Question

I’m trying to create a div (topbar) (width = 100%;). Below that I want my maincontent in a div with my maincontent. This needs to be 600px in width and centeret in the screen.

Normally I would set body width = 600px and margin: auto, but then my topbar is shortened.

Whats the easiest way to do this?

Answer 1

There is no need to touch the width of the body element

#topbar {
    width:100%;
    height: 150px; // Whatever height you want
 }

 #mainContent {
   width: 600px;
   margin: 0 auto; // Center on the screen
 }