asked on

Div Height

I'm trying to make a box using all divs and css that has the top left and right corners rounded. The trick here that I want to be have the box stretch to the width of the the parent element. Like a table with width="100%". A number of things aren't happening correctly. The first row is way too tall, it's only supposed to be 6px. It doesn't float correctly, TopFill is too wide, but if I take width: 100% out, it doesn't work right either. See the code below:

<div id="MainFrame" style="width: 800px">
      <div id="LeftColumn" style="width: 400px;">
            <div id="Box">
                  <div id="TopRow" style="height: 6px;">
                        <div id="TopLeftCorner" style="float: left; width: 6px; height: 6px; background-image: url(http://skinnedclient.whatbird.com/skins/whatbird/images/UL_Corner_lightblue.gif);"></div>
                        <div id="TopFill" style="float: left; width: 100%;background-color: #4f75d8; height: 6px;"></div>
                        <div id="TopRightCorner" style="clear: right; width: 6px; height: 6px; background-image: url(http://skinnedclient.whatbird.com/skins/whatbird/images/UR_Corner_LightBlue.gif);"></div>
                  </div>
                  <div id="Header" style="clear: both;background-color: #4f75d8">
                        header Title
                  </div>
                  <div id="Body">
                        body
                  </div>
            </div>
      </div>
</div>

ASKER CERTIFIED SOLUTION

Morcalavin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

darthg8r

ASKER

No thank you, I'm looking for the html/css solution. I should also add that this is xhtml 1.0 transitional.

SOLUTION

superchief

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

darthg8r

ASKER

Ok, that's close. I know the width now, but I'd like to reuse this same code in many different places, so the "auto-adjust" width is important

Morcalavin

The code I posted, while a javascript file, produces VALID html and can be used along side your existing CSS. It should also validate under xhtml just fine. It will also allow you to reuse the code, and may eliminate any issues you may have. It also doesn't use images, rather PURE css and html. Your code uses images, so the .js file is as valid as "html/css solution" as your code is.
Not trying to sound preachy, but people write a lot of really good code so you don't have to.

superchief

Well a full CSS solution to the problem without resorting to using javascript would be this:

<div id="MainFrame" style="width: 800px">
<div id="LeftColumn" style="width: 400px;">
<div id="Box">
<div id="TopRow" style="height: 6px; line-height: 6px;background-color: #4f75d8">
<div id="TopLeftCorner" style="float: left; width: 6px; line-height: 6px; height: 6px; background-image: url(http://skinnedclient.whatbird.com/skins/whatbird/images/UL_Corner_lightblue.gif);; background-color:#FFFFFF""></div>
<div id="TopRightCorner" style="float: right; width: 6px; line-height: 6px;height: 6px; background-image: url(http://skinnedclient.whatbird.com/skins/whatbird/images/UR_Corner_LightBlue.gif); background-color:#FFFFFF"></div>
</div>
<div id="Header" style="clear: both;background-color: #4f75d8">
header Title
</div>
<div id="Body">
body
</div>
</div>
</div>
</div>

This should mean that you can make the box any size you like.