Margin / align problem

programming web dev
1

Hello everyone,

I just found this site and it looks like a great community!:slight_smile:
I have a problem with alignment and didn’t found the awnser anywhere.

I want the content_bg Div to stay centered on every size so it slides out of the left side of the screen. At the moment it works great at large sizes, though if I shrink the screen It sticks to the left.

This is the code:

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“nl”>
<head>
<title>v2</title>
</head>
<body style=“background-color:#aaa; padding:0; margin:0;”>
<div id=“header” style=“background-color:#ccc; width:996px; height:100px; margin-left:auto; margin-right:auto;”>
header
</div>

<div id=“content_wrapper” style=“background-color:#999; overflow:hidden; position:relative; margin: 0 auto”>

<div id=“content_bg” style="background-color:red; width:1400px; height:100px; margin: 0 auto; ">
CONTENT BG
</div>

<div id=“content” style=“background-color:#eee; width:996px; height:400px; margin: 0 auto”>
content
</div>

</div>

<div id=“footer” style=“background-color:#ccc; width:996px; height:100px; margin-left:auto; margin-right:auto;”>
footer
</div>

</body>
</html>

Thanks in advance!

Greetings,
Thymen