Support » Fixing WordPress » Centering with CSS for three elements

  • Resolved jbwhisler

    (@jbwhisler)


    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.

    Media

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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;
    }

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

    Glad to help

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Centering with CSS for three elements’ is closed to new replies.