How to make div expand all the way to the right_问答_开发者

The demo page: CLICK HERE

I have made a picture to show:

How to make div expand all the way to the right

As clearly seen in the picture, there is a gap from the div left_bg and the div middle_bg. The left_bg has no content, and its width should be fluid and fit inside it's div container top-container. Just to help demonstrate the gap I have it set left_bg to width:500px. However, Please note that the width should be fluid. The div middle_bg will also be fluid, as it will allow for different text longer or shorter.

How can I get rid of this gap and allow left_bg to fit?

Update

I am thinking that perhaps using CSS like a table would accomplish what I am after. I tried tweaking and messing around but I could not quite get it to work. I have set 100 rep bounty to assist me with 开发者_如何学运维this problem.

Using tables would be the best way of doing this

<table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0pt; margin: 0pt;">
    <tbody>
        <tr align="top">
            <td style="width: 100%; height: 85px;">
                <div class="left_bg">
                </div>
            </td>
            <td style="">
                <div class="middle_bg">
                    <p>
                        Michicraft Boats</p>
                </div>
            </td>
            <td>
                <div class="right_bg">
                </div>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div id="top-container-links">
                    <a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

and change your css to

#top-container .left_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-color: white -moz-use-text-color white white;
        border-style: solid none solid solid;
        border-width: 1px 0 1px 1px;
        height: 85px;
        width: 100%;
        -webkit-border-radius: 20px 0 0 20px;
        -moz-border-radius: 20px 0 0 20px;
        border-radius: 20px 0 0 20px;
        behavior: url(/PIE/PIE.htc);
    }
    #top-container .middle_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-top: 1px solid white;
        float: right;
        height: 44px;
        margin-top: -42px;
        text-align: center;
        white-space: nowrap;
    }

#top-container .middle_bg {
    width: 263px;
}

Since #top-container is 775px, .left_bg is 500 with a left margin of 1 and .righ_bg is 10px with a right margin of 1.

if you set its width to 514px it touches the blue. if you want it to go all the way to the right then change #top-container .left_bg

position:absolute; width:773px;

Usually it is done by seeting the div to width: 100% and the element itself and the elements right of it floating.

Got it stick to right by setting width of #top-container .left_bg to 514px.

Edit :

change #top-container .middle_bg p to absolute positioning :

position:absolute;
right:2px;
bottom:0px;

and add into #top-container

position:relative;

also keep #top-container .left_bg width to 514px.

I think you're over-complicating the layout of that navigation area. I tried this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
      body, html {
        background-color: #949dad;
        padding: 0;
      } 
      p {
        margin: 0; 
        padding: 0;
      }
      .brand {
        color:#FFFFFF;
        background-color: #949DAD;
        -moz-border-radius:10px 10px 0 0;
        border:1px solid white;
        border-bottom-style: none;
        font-family:Georgia,"Times New Roman",Times,serif;
        font-size:31px;
        margin:44px 0 0 0;
        min-width:215px;
        padding:5px 10px 0;
        position:relative;
        float: right;
        height: 36px;
        overflow: visible;
      }

      .brand_container {
        font-size:12px;
        background-color:#A3AFC6;
        border: 1px solid white;
        height:85px;
        text-align:center;
        -moz-border-radius:20px 0 0 20px;
        background:none repeat scroll 0 0 #A3AFC6;
        float:left;
        width:800px;
        padding:0px 5px;
        margin:0 0 20px 0;
      }

      .brand .links {
        width:100%;
        float:right;
        clear:both;
        margin-top:1px;
        font-size:11px; 
        font-family:Georgia, "Times New Roman", Times, serif;
        text-align:center; 
      }
      .brand .links a{color:#fff; text-decoration:none;}
      .brand .links a:hover{color:#fff; text-decoration:underline;}

      .body {
        margin-top: 105px;
        width:800px;
        padding:0px 5px;
        border: 1px solid white; 
        clear: both;
        background-color:#A3AFC6;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <div class="brand_container">
      <div class="brand">
        <p>Michicraft Boats</p>
        <div class="links"><a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div>
      </div>
    </div>
    <div class="body"> Content here <br><br><br><br></div>
  </body>
</html>