Solved

Div Height

Posted on 2006-11-09
8
557 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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

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!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

623 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