Question

I have got a basic question , I have got a menu box in which there are two sections , right -text section and left text section , but I cant layout both horizontally as shown in the image , i want both to be aligned in horizontally without using negative margins.

Css used:

<div id="Menu">
<div class="Menu-Left-Text">This<br />is the  <br />section for<br />left text.</div>
<div class="Menu-Right-Text">This<br />is the  <br />section for<br />right text.</div>
</div>

#Menu .Menu-Left-Text
{
margin-left: 9px; 
padding-top: 9px; 
font-size: 16pt;
font-family: 'ITC Avant Garde Gothic';
font-weight: bolder;
width: 189px;


  }
  #Menu .Menu-Right-Text
 {
float:right;
font-family: 'Times New Roman' , Times, serif;
font-weight: bold;
}

Answer 1

.Menu-Left-Text { float: left; width: 50%; }
.Menu-Right-Text { margin-left: 50%; }
#Menu { overflow: auto; }

Using the above means that there’ll be something in the flow of the page inside your #Menu, meaning your #Menu will have a height that’s affected by its content. That’ll allow you to add a background colour / image to #Menu that will actually work.

Or, if you don’t care about it working in IE7 or lower:

#Menu { display: table; }
#Menu > div { display: table-cell; }

This has the benefit of both sides taking equal amount of space, as well as the all of the content affecting the height of the #Menu