CODEWITHSUNDEEP
csshtmlcenter
Ruf1
Ruf1

Reputation: 179

DIV won't center

Im having difficulty horizontally centering two adjacent DIV's. The two divs "JoinSub" within their parent "JoinSubWrap" currently float left and not centering. The parent div has margin o auto which I thought would center both parent and children.

here's my HTML

<div id=JoinSubfooter> 
    <div id="JoinSubfooter-wrapper">
        <div id="subft-line"></div>
        <div id="JoinSft-msg-block">Some Text Goes Here</div>

        <div id="JoinSubWrap">
            <div id="JoinSub">
                <h2>Title 1</h2>
                <p>message goes here</p>
            </div>

            <div id="JoinSub">
                <h2>Title 2</h2>
                <p>message goes here</p>
            </div>
        </div>

    </div>
</div>

Here's my CSS

#JoinSubfooter {
    width: 100%;
    height: 300px;
    background: transparent url(../images/grey_body_noise.png);
    clear: both;/*Clears all columns and sets the footer at the bottom*/
}

#JoinSubfooter-wrapper {
    width:981px;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
    text-align:center;
}

#JoinSft-msg-block {
    background: transparent url(../images/grey_opaque_pixel.png);
    border: 1px solid #CCCCCC;
    color:#FFFFFF;
    display:inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight: bold;
    margin: 30px 0px 0px 0px;
    padding: 10px 20px 10px 20px;
}

#JoinSubWrap {
    margin: 0 auto;
}

#JoinSub {
    float:left;
    margin: 20px 0px 0px 0px;
    padding: 0px 12px 12px 12px;
    width: 200px;
    border-right: solid #666666 1px;  
}

#JoinSub:last-child {
    border: 0px;
}

#JoinSub h2{
    font-size: 1.5em;
    font-weight: bold;
}

Upvotes: 0

Views: 1720

Answers (2)

vaskort
vaskort

Reputation: 2861

Try this mate: 

<div id=JoinSubfooter> 
    <div id="JoinSubfooter-wrapper">
        <div id="subft-line"></div>
        <div id="JoinSft-msg-block">Some Text Goes Here</div>

    <div id="JoinSubWrap">
        <div class="JoinSub">
            <h2>Title 1</h2>
            <p>message goes here</p>
        </div>

        <div class="JoinSub">
            <h2>Title 2</h2>
            <p>message goes here</p>
        </div>
    </div>

    </div>
    </div>

and css

  #JoinSubfooter {
  width: 100%;
  height: 300px;
  background: transparent url(../images/grey_body_noise.png);
  clear: both;/*Clears all columns and sets the footer at the bottom*/
}

  #JoinSubfooter-wrapper {
  width:981px;
  margin: 0 auto;
  padding: 10px 0px 10px 0px;
  text-align:center;
}

  #JoinSft-msg-block {
  background: transparent url(../images/grey_opaque_pixel.png);
  border: 1px solid #CCCCCC;
  color:#FFFFFF;
  display:inline-block;
  font-family:Arial, Helvetica, sans-serif;
  font-size:24px;
  font-weight: bold;
  margin: 30px 0px 0px 0px;
  padding: 10px 20px 10px 20px;
  }

  #JoinSubWrap {
  margin: 0 auto;
  text-align:center;
  }

  .JoinSub {
  margin: 20px 0px 0px 0px;
  padding: 0px 12px 12px 12px;
  width: 200px;
  border-right: solid #666666 1px;  
   margin: 0 auto;  
    overflow:hidden;
    display:inline-block;
  }

  #JoinSub:last-child {
  border: 0px;
  }

  #JoinSub h2{
  font-size: 1.5em;
  font-weight: bold;
  }

And fiddle link: http://jsfiddle.net/mu42P/

Upvotes: 0

daniel__
daniel__

Reputation: 11845

#JoinSubWrap {
    margin: 0 auto;
    display: table; 
}

Add display:table.

http://jsfiddle.net/Eq5gL/

Upvotes: 1

Related Questions