Grow your CSS skills. Land your dream job.

It it posible to center a div as if it was wider then it is?

  • # April 9, 2013 at 5:17 pm

    Hi

    I have this code

    and this css

    article{
    max-width: 300px;
    height: 300px;
    background: red;
    margin: auto;
    }
    header{
    width: 130%;
    height: 100px;
    margin-left: -30%;
    background: blue;
    }
    This is exactly what I want. However, on a smaller screen, there is no space on the left, so there is 30% white space on the right, but on the left, the header touches the edge of the screen. At this point, I wish that I could align my article in the center, but based on the headers width.

    I know that I could wrap the article in a div and it would fix the problem ([codepen sample](http://codepen.io/aurelkurtula/pen/Juzke “”)) . But now that I noticed this problem, I’m just curious if there was a solution to this without using a wrapper.

    Thanks

    # April 9, 2013 at 5:32 pm

    You should just use a media query to target smaller screen sizes and provide separate styles.

    # April 9, 2013 at 5:35 pm

    I started using media queries and it works great. But mostly because there are always little css tricks that I dont know about, I though there might be something to learn in this case.

    # April 9, 2013 at 5:38 pm

    One way to adjust more:

    article{
    max-width: 300px;
    height: 300px;
    background: red;
    margin: auto;

    position: relative;
    left: 11.75%;
    }

    But it’ll go out of the screen eventually. Using padding-left might work as well. Of course it is best to go with @TheDoc‘s advice.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".