ansaurus

Question

How to make div expand all the way to the right.

Answer 1

A:

#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.

klez 2010-08-28 10:58:23

Answer 2

A:

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.

youssef azari 2010-08-28 11:00:28

Please see edit :)

BHare 2010-08-28 11:02:10

i edited, please see.

youssef azari 2010-08-28 11:14:47

Your edit still does not work.

BHare 2010-08-28 11:34:04

Answer 3

A:

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

to

position:absolute; width:773px;

Moin Zaman 2010-08-28 11:02:40

I want it so it touches the blue, but not hard-code the width in. I want it to allow the middle-bg to be fluid.

BHare 2010-08-28 11:07:01

Answer 4

A:

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

Kau-Boy 2010-08-28 11:08:55

This makes sense, but its not working in this case?

BHare 2010-08-28 11:35:04

Answer 5

+1 A:

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;
    }

Vinay B R 2010-09-01 18:47:41

The width needs to be fluid. 514px works when `middle-bg` is Michicraft Boats. But when I make the text "test" the width then needs to be more than 514px...thus its not fluid.

BHare 2010-09-01 19:44:50

have edited my answer, i have used tables which according to me is the easiest way of acheiving this

Vinay B R 2010-09-01 20:12:07

This works. I can even using CSS `display: table` and `display: table-cell` to mimic this functionality. Of course, it doesnt work for IE6 and IE7. I really dont like the extra markup of using a table but it seems the only option. I am giving this question another day before I accept the fact I have to use old fashion tables and accept your answer

BHare 2010-09-02 12:51:02

I need the bounty for something else. I've decided to accept this answer. I am tired of doing different things for IE6, IE7, and IE8. I am deciding on just using conditional CSS statments for css for each.

BHare 2010-09-02 14:49:45

Answer 6

A:

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"&gt;
<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"&gt;&lt;/script&gt;
    <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>

Mr. Shiny and New 2010-09-02 15:43:15

This indeed a simpler approach if I didn't need the `brand` class to be transparent. Unless there is a way to force a "cutout" effect in CSS, I can't have the `brand-container` underneath the `brand`

BHare 2010-09-02 17:59:34

@BHare, yeah, I saw from another of your questions that you are going to put an image behind all that. In that case you will need a complicated layout. There might be a way to simulate the cutout without needing so many divs, however.

Mr. Shiny and New 2010-09-03 14:31:49

ansaurus

tags:

views:

answers:

How to make div expand all the way to the right.

related questions