Question

I am facing this problem

#sub-title {
   width: 700px;
   margin: 0 auto;
   text-align:center;
}
#sub-left {
   float: left;
}
#sub-right {
   float: left;
}
.clear-both {
   clear: both;
}

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

Fiddle: http://jsfiddle.net/bGF7E/

How do i center sub-left and sub-right? Please ignore the annotated name.

Answer 1

You don’t have a lot of details in your question.

If you don’t specify widths of the floating div‘s, they’re only going to be as wide as their contents.

The parent div is 700 pixels wide, so to center the two floating div‘s you’ll have to set their widths…

http://jsfiddle.net/bGF7E/6/

http://jsfiddle.net/bGF7E/6/show/

Alternatively, if you’d like content to dictate width of the floating div‘s, you can simply float the right div to the right.

http://jsfiddle.net/bGF7E/11/

http://jsfiddle.net/bGF7E/11/show/