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
Solved

Div Height

Posted on 2006-11-09
8
545 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 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Border and image sizing 5 29
Joomla 2.5 shopping cart 7 30
ability to create nested list on the UI using PHP, HTML, Javascript 7 45
Insert Button on a table 16 37
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 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