Solved

Div Height

Posted on 2006-11-09
8
547 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
8 Comments
 
LVL 18

Accepted Solution

by:
Morcalavin earned 63 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 62 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

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

761 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