Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Design

<div> height issue

Author Message
purvisa



Joined: 21 Jul 2005
Posts: 182
Location: Kirkland, WA

Posted: Mon Nov 21, 2005 - 3:06 am    Post subject: <div> height issue Reply with quote

I am working on a handbook, but the problem that currently has me stumped is this: How can I make a <div> take the height of a child <div>? Take a look at the code below (just dummy code I am using to get this working) and tell me what I am doing wrong. For a shorter version, tell me how I can fix my problem.

Code:

   <div id="rowOne">
      <div class="nav">
      Topic:
      </div>
      <div id="rowOneContent">
      B
      </div>
   </div>
   <div id="rowTwo">
      <div class="nav">
      Rule:
      </div>
      <div id="rowTwoContent">
      D
      <br>
      x
      </div>
   </div>


What I want to be able to do is have rowOne have a height of one line (as determined by the "B" in it) while having rowTwo take the height of two lines (because it has contains a <div> with"D<br>x" inside).

The child <div> (rowTwoContent) has no trouble taking the height from its content, but rowTwo won't expand with its child.

Solutions?
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
Dori



Joined: 27 Jan 2005
Posts: 47
Location: Healdsburg, CA

Posted: Mon Nov 21, 2005 - 8:11 pm    Post subject: Re: <div> height issue Reply with quote

purvisa wrote:
How can I make a <div> take the height of a child <div>? Take a look at the code below (just dummy code I am using to get this working) and tell me what I am doing wrong. For a shorter version, tell me how I can fix my problem.


I tried looking at this, and your question didn't give me enough info to go on.

I duplicated your code, and what I ended up with had two lines for rowOne (as it contains two divs) and three lines for rowTwo (one for the first div, and two for the second div). I can't tell if this is or isn't what you want.

If you can explain what you want more precisely, I can try and help.
View user's profile Send private message Visit poster's website AIM Address Widgets
purvisa



Joined: 21 Jul 2005
Posts: 182
Location: Kirkland, WA

Posted: Mon Nov 21, 2005 - 10:58 pm    Post subject: Reply with quote

Sorry, I should have included more. I have a total of four lines. But even with the two lines, the height of the second row <div> does not change, the text is just visible overflow. More specifically, the text increases the size of the second <div> in the second row without affecting the parent <div>. The problem is that a <div> will take on the necessary height to display its contents (unless its height is constrained), but a <div> does not count an enclosed<div>'s contents as its own content.

The only method I have found for solving this problem is, to me, a little distasteful, but it works: tables. Technnically, the information is being presented as a table (the left column contains an identifier, and the right column contains the detailed information), so this is not an abusive use of a table, but I would prefer a more elegant solution.

Getting back to the main problem, I am going to list the topic, the rule (subtopic), the explanation of the rule, and an example. I could eliminate the labels altogether, but the overflow problem may well remain. I could put the labels above each section, but that looks clunky. I could go with the table solution, which I have since gotten working with a dynamically created menu. The only other possibility that comes to mind is reading the height of a child <div> after the content is inserted and then setting the height of the parent <div> to that of the child.
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group