CODEWITHSUNDEEP
htmlcss
user3466255
user3466255

Reputation: 1

centering a CSS div, having problems with the middle

http://codepen.io/willc86/pen/hpFLe

Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser

this is my code

#box{
  border: 3px solid red;

}

#space{
  text-align: center;

}
#leftcolumn { 
  width: 300px; border: 1px solid red; float: left; margin: 40px;
  margin-right: 20px;

}
#rightcolumn { 
  width: 300px; border: 1px solid red; float: right; 
  margin: 40px; margin-left: 20px;

}
#mcolumn {
   width: 300px; border: 1px solid red; float: left; margin: 40px;

}
.clear {
   clear: both;
}

and my HTML

<div id="box">
      <div id="space">       
            <div id="leftcolumn"><p>LEFT</p></div>
            <div id="rightcolumn"><p>RIGHT</p></div>
            <div id="mcolumn"><p>mcolomn</p></div>
            <div class="clear"></div>          
      </div>
  </div>

Upvotes: 0

Views: 59

Answers (2)

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you, #mcolumn is centered now

 #mcolumn {
 width: 300px;
 border: 1px solid red;
 margin: 40px auto;
 display: inline-block;
 }

Demo

Upvotes: 0

tunya
tunya

Reputation: 36

Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.

Here is modified example: http://codepen.io/anon/pen/pitod

(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)

Upvotes: 1

Related Questions