How to increase the height of left panel div as the content div increases.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mahenk
    New Member
    • Mar 2007
    • 2
    #1

    How to increase the height of left panel div as the content div increases.

    Hello
    Can any body help me with this
    The problem is

    As the text increses in height the side bar should also increase.

    As shown in pic.
    [IMG][/IMG]

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
body{
margin:0px;
height: 100%;
}
.home1
{
margin-left:20px;
margin-top:20px;
width:350px;
clear:left;
}
.home1_text
{
	padding-left:4px;
	font:9pt Arial, Helvetica, sans-serif;
	float:left;
}
.home1_bar
{
	width:15px;
	background-color:#90BFCF;
	height:100%;
	float:left;
}
</style>

<body>
<div class="home1">
				<div class="home1_bar"></div>
				<div class="home1_text">We intend to assist deserving Indian manufacturers of workshop tools, to export in the world market using                 our experience and contacts of over 50 years.
				</div>
</body>
</html>
    Tags: None
    • Yanskopolis
      New Member
      • Mar 2007
      • 9
      #2
      It already does increase in height.

        Comment

        • Yanskopolis
          New Member
          • Mar 2007
          • 9
          #3
          Oh wait, you're talking about the sibling div right? The only way you could make it's height relative to the content of a sibling element is to use Javascript.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              As usual, validate for your list of errors that will fix this problem.

                Comment

                • AricC
                  Recognized Expert Top Contributor
                  • Oct 2006
                  • 1885
                  #5
                  You can use percentages to help. When you say the text increases you mean when you add content?

                    Comment

                    • mahenk
                      New Member
                      • Mar 2007
                      • 2
                      #6
                      Originally posted by AricC
                      You can use percentages to help. When you say the text increases you mean when you add content?
                      Hello Folks,
                      let me agian explain my problem.
                      if you see the code
                      the div with class home1_bar should increase in height as the text matter in the div with class home1_text increases.
                      Presently the div with class home1_bar remains of the same height irrespective of the increase in the text matter in div with home1_text.

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          And I repeat again, fix your errors to fix the problem.

                            Comment

                            • oldunclebill
                              New Member
                              • Mar 2007
                              • 1
                              #8
                              I have no idea what you're trying to accomplish, but this will give you a different result:

                              <div class="home1">
                              <div class="home1_ba r">
                              <div class="home1_te xt">We intend to assist deserving Indian manufacturers of workshop tools, to export in the world market using our experience and contacts of over 50 years.
                              </div>
                              </div>
                              </div>

                                Comment

                                Previous template Next
                                Working...