Solved

Div Height

Posted on 2006-11-09
8
550 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
Independent Software Vendors: 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

751 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