Dynamic Div Pushing Content Down

menkes · Jul 2, 2009

First off, design is definitely not my strong point...but I need to get this working. It is an Ajax search box that drops down a suggestion list - standard stuff these days. But I just cannot get the CSS right:

Here's the html:

Code:

    <body style="margin-top: 0px; padding-top: 0px;">
        <div class='nav_sub_span'>
            <div id='submenu' class='nav_menu_sub'></div>
            <div class='ls_span'>
                <input type='text' name='lstxt' id='lstxt' class='ls_textbox' size='30' onkeyup='showResult(this.value)' value='Database Search'>
                <image src='../images/search1.gif' alt='Database Search' height='18' width='18'>
            </div>
        </div>
    
        <div class='nav_crumbs'></div>
        <div id='ls'></div>
        <div class="nav_menu_foot"></div>

        
        <div class='main_content'>
           stuff goes here
        </div>

And here's the css:

Code:

#ls{ 
    margin-top: 0px;
    margin-right: 30px;
    width:300px; 
    float: right;
}

.ls_text{ 
    margin:0px;
}
    
.ls_textbox{
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #6F6F6F;
}

.ls_textbox_focus{
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
   
table.ls_table{
    width: 300px;
    background-color: #5b717d;
    border: 1px #ccd6df solid;
    border-collapse: collapse;
    border-spacing: 0px;
}

td.ls_cell{
    border-bottom: 1px #ccd6df solid;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 0px;
    color: #ffffff;
}

.ls_span{
    width: 50%;
    text-align: right;
    float: right;
    padding-top: 0px;
    padding-bottom: 1px;
}

.nav_sub_span{
    border: 0;
    margin: 0;
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
    overflow: visible;
    width:100%;
}

.nav_menu_sub{
    float: left;
    width: 50%;
	font-size: 16px;
	font-family: Verdana, Geneva, san-serif;
    font-weight: bold;
	color: #ffffff;
}

.nav_menu_foot{
    height:10px;
    width: 100%;
    clear: both;
}

.nav_crumbs{
    text-align: left;
    float: left;
    margin-left: 10px;
    margin-top: 6px;
    padding: 0;
    width: 60%;
}

.main_content{
    width:100%;
    position: absolute;
}

So I have 2 problems with this:

1. When the suggestion box, div with id='ls', appears, it pushes all content below it down. I have tried everything I can think of in Firebug with no change.

2. The div with id='ls' aligns correctly with the textbox above it in IE7 & 8, but it is offset to the left by about 15px in Firefox (I only need to test those 2 browsers).

Appreciate any help on this one.

- Scott

Vragabond · Jul 2, 2009

Regarding 1, you should use absolute positioning. Absolute positioning makes element float above the regular content, not disturbing the flow of the rest of the content.

Regarding 2, it's hard to say why it is that way, but maybe your suggestion box should be a closer sibling to the actual input element to allow it to be positioned more precisely next to it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

menkes · Jul 6, 2009

Vragabond,

Thanks for the response. I tried absolute positioning. The only element it made a difference on was the 'ls' div. Unfortunately, instead of appearing below the textbox the div appears to the far left of the page...basically the same upper-left position as the 'nav_sub_span' div.

- Scott

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic Div Pushing Content Down

menkes

Programmer

Vragabond

Programmer

menkes

Programmer

Similar threads

Part and Inventory Search

Sponsor