Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Div Height

Posted on 2006-11-09
8
Medium Priority
?
569 Views
Last Modified: 2010-04-09
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>
0
Comment
Question by:darthg8r
  • 2
  • 2
  • 2
8 Comments
 
LVL 18

Accepted Solution

by:
Morcalavin earned 252 total points
ID: 17907276
Just use http://www.curvycorners.net/ to make a box with rounded corners.  You'll save tons of time since everything is already done for you.
0
 
LVL 1

Author Comment

by:darthg8r
ID: 17907659
No thank you, I'm looking for the html/css solution.  I should also add that this is xhtml 1.0 transitional.
0
 
LVL 1

Assisted Solution

by:superchief
superchief earned 248 total points
ID: 17907875
A couple of things:

There is a small problem with IE that for some reason even if you make the div say 3 px in height it will default to the size of the text line. In order to solve this you must say that line-height: 6px;.

Ok, the next thing. In this instance you have specified that the width of your left column is 400px, there is no need to make anything 100% of the width because you already know the width, so hard code it. Another issue is that the middle column the TopRow fill is trying to be 100% of its containing element, which will explain why the two left and right corners are acting strange.

I have altered the code slightly and get a different result. Hope this helps.

<div id="MainFrame" style="width: 800px">
     <div id="LeftColumn" style="width: 400px;">
          <div id="Box">
               <div id="TopRow" style="height: 6px; line-height: 6px;">
                    <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);"></div>
                    <div id="TopFill" style="float: left; width: 388px;background-color: #4f75d8; height: 6px; line-height: 6px;"></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);"></div>
               </div>
               <div id="Header" style="clear: both;background-color: #4f75d8">
                    header Title
               </div>
               <div id="Body">
                    body
               </div>
          </div>
     </div>
</div>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:darthg8r
ID: 17908449
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
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17908575
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.
0
 
LVL 1

Expert Comment

by:superchief
ID: 17912558
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.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question