Question

• I have a top nav that extends across the page
• Within that top nav I have various elements
  • two that must align left
  • one that must align right
• The nav is fluid the elements are fixed widths
• Do not want the elements to wrap when the browser window is minimized
• Needs to work in IE6 on up due to high Chinese audience.

See example here:
http://jsfiddle.net/4SUwg/

<div id="header">
  <div id="headerContent">
    <div class="search-list"> Search List </div>
    <div class="social-buttons"> Social </div>
    <div class="signin"> Login Drop Down </div>
  </div>
</div>

I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE’s.

Thanks all for your help in advance!!!

Answer 1

I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.

<div id="header2">
    <table id="headerContent2">
        <tr>
            <td id="left" valign="top">
                <div id="leftWrapper">
                <div class="search-list2">Search List</div>
                <div class="social-buttons2">Social Buttons</div>
                </div>
            </td>
            <td id="middle">&nbsp;</td>
            <td id="right" valign="top">
                <div class="signin2">Login Drop Down</div>
            </td>
        </tr>
    </table>
</div>


<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}

#headerContent2 {
width:100%;
}

#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}

.search-list2 { 
width:150px; 
float:left;
background:#039;
}

.social-buttons2 { 
width:200px; 
float:left;
background:#060;
}

.signin2 { 
background:#F00;
float:right;
width:400px;
}

#leftWrapper {
width:400px;    
}

#middle {
width:100%;
}
</style>

See Demo of it working here. Copy the code and try it out in all the IE’s since JSfiddle does not work in all IE’s.
http://jsfiddle.net/GtXKE/