How can I make the ul list the same size as the input element in terms of width?

Question

I have a container that has two fixed sized elements, and one fluid sized element. When the browser is resized, the fluid element takes the remaining size of the window while the other two stay fixed. The problem is, I have a ul that is being inserted after the input element in a container. How can I make the ul list be the size of the input element in terms of width?

jsfiddle: http://jsfiddle.net/vR7E8/

code:

<div class="wrap">
  <div class="left">
  </div>

  <div class="middle">
    <input class="my_input" />
    <ul class="my_list">
      <li> list one</li>
      <li> two </li>
      <li> three </li>
      <li> four </li>
    </ul>
  </div>

  <div class="right">
  </div>
</div>

css:

.wrap
{
    display: block;
     width: 100%;
     height: 100px;
     background: yellow;
     padding-left: 40px;
     padding-right: 50px;
     position: relative;
}

   .left
   {
      display: inline;
       width: 30px;
       height: 100px;
       background: blue;
   }

     input.my_input
     {

        width: 100%;
        height: 100px;
        display:inline-block;
       }

      .right
      {
        display: inline;
        background: green;
        width: 40px;
        height: 100px;
      }

     .my_list
     {
      list-style: none;
       padding: 0;
       margin: 0;
       position: absolute;
        width: 100%;
       border: 1px solid black;
        }

btw the ul list needs to be absolutely positioned because i dont want it to shift the content below it.

also, its setting the width of the list to the size of the parent, so i tried adding a wrapper to the div container "middle" but didnt work.

UPDATE:

ok i got it to work, i just had to make a container, and set that container to position: relative.

Answer 1

Can you add this to your middle section?

.middle {
    position: relative;
    width: 200px;

}

By setting a width in either % or px, and setting the container to relative position, you give both elements the same parent base to size from.

Answer 2

remove the position:absolute from the <ul> element. Absolute positioning takes the element out of the normal flow, and won't automatically fit to the width of the parent element.

Alternatively you could set a fixed width for both the <input> and the <ul>

here's your jsfiddle forked to show the first fix: http://jsfiddle.net/27qeJ/

Answer 3

got it, just create a container element wrapping the div containing the input and list elements, and set that wrapper to position: relative.