Centering with CSS for three elements

  • Resolved jbwhisler

    (@jbwhisler)


    12 years, 2 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Sleneau

    (@sleneau)

    12 years, 2 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;
}
    Thread Starter jbwhisler

    (@jbwhisler)

    12 years, 2 months ago

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

    Sleneau

    (@sleneau)

    12 years, 2 months ago

    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.