Typically, the code margin:auto
is used for centering, but I have a different code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* centered - nice */
}
header{
width: 130%;
margin-left: -30%;
}
Currently, the article
is centered. However, as the window size decreases, I want it to be centered relative to the width of the header
. Essentially, when the browser window is shrunk, the header
should align with the left edge, making use of all available space on the right.
I prefer not to introduce an additional div
, but if I were to, I would wrap the article in a div
and apply auto margins.
View screenshot here http://i3.minus.com/i2yPFqNDgeBbS.png