WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Centering with CSS for three elements (4 posts)

  1. jbwhisler
    Member
    Posted 7 months ago #

    I have been trying so hard to figure this out and I can't wrap my mind around the CSS. I just need 1 centered <div> container on the page with 3 containers inside of it. They each have a different width but all have the same margins and need to be centered. Here is my website. The failed attempt is at the bottom using absolute positioning. I am running a child theme of twenty twelve. Can anyone help please? Thank you.

    http://www.concordiabaptist.com/?page_id=9

  2. Sleneau
    Member
    Posted 7 months ago #

    I'm totally right there with you. CSS is often a dragon to be slain. Here are a few suggested changes that accomplish what you're looking to do. Update the existing styles in your style.css file with these to make the changes:

    .mmd1 {
    width: 100%;
    height: 175px;
    position: relative;
    margin: 0 auto;
    border: solid;
    }
    
    .mmd2 {
    width: 280px;
    height: 155px;
    display: inline;
    float: left;
    margin-left: 7px;
    margin-top: 7px;
    border: solid;
    background-position: left center;
    }
    
    .mmd3 {
    width: 400px;
    height: 155px;
    border: solid;
    background-position: center center;
    display: inline;
    float: left;
    margin-left: 8px;
    margin-top: 7px;
    }
    
    .mmd4 {
    width: 230px;
    height: 155px;
    border: solid;
    background-position: right center;
    display: inline;
    float: left;
    margin-left: 8px;
    margin-top: 7px;
    }
  3. jbwhisler
    Member
    Posted 7 months ago #

    I learn so much here on these forums. Much appreciated man. Thank you.

  4. Sleneau
    Member
    Posted 7 months ago #

    Glad to help

Reply

You must log in to post.

About this Topic