Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43989
    akurtula
    Participant

    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

    #131169
    TheDoc
    Member

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

    #131172
    akurtula
    Participant

    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.

    #131174
    Merri
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.