Thread: Expanding parent Div when child generates text
View Single Post
Old 01-22-2013, 06:34 PM   PM User | #3
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello BenR,
You are describing how a div element works when you don't set a height on it. Of course, you will get the y scroll on the right edge of the browser window but the expanding parent container won't get one.

Just remove your heights and let the div elements behave naturally.

...I fixed a couple errors in this but there are 67 more that you need to look at. See the links about validation in my signature line below.

I've highlighted some of the changes in red below:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Guy (using CSS)</title>
<style type="text/css">
.h1 {
	font-size: 60px;
	color: #00ffff;
	font-weight: bold;
	text-align: center;
}
.h2 {
	font-size: 20px;
	color: black;
	font-weight: bold;
	text-align: center;
}
.h3 {
	font-size: 40px;
	color: black;
	font-weight: bold;
	text-align: center;
}
.h4 {
	font-size: 15px;
	color: black;
	text-align: left;
}
body { background: rgb(245,246,247); }
#container {
	width: 1200px;
	height: 1000px;
	margin: auto;
	border: solid;
	padding: 5px;
	margin: auto;
	background: white;
	overflow: inherit;
}
#header {
	width: 100%;
	height: 100px;
	text-align: center;
	background: white;
	margin-bottom: 5px;
}
.line {
	width: 100%;
	margin: 0 auto 5px;
	overflow: auto; /*to clear the floats*/
	background: rgb(245,246,247);
	text-align: center;
}
.box {
	width: 200px;
	margin: 0 20px 5px 10px;
	float: left;
	text-align: left;
}
</style>
</head>

<body>
<div id="container">
<div id="header"><span class="h1"> HEADER SAMPLE </span><br>
  <span class="h2">Cardiac/Respiratory Arrest</span></div>
<div class="line">
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 1<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 2<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 3<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
            <LI><A title="" href="#" target="">sample</A> </LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 4<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 5<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
            <LI><A title="" href="#" target="">Other</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
</div>
<div class="line">
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 6<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample/sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 7<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 8<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 9<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
  <div class="box">
    <p>
    <DIV style="MARGIN: 5px 20px 20px">
      <DIV class=quotetitle><STRONG><FONT size=5>Header 10<BR>
        </FONT></STRONG>
        <INPUT style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" value=Show type=button>
      </DIV>
      <DIV class=quotecontent>
        <DIV style="DISPLAY: none">
          <UL>
            <LI><A title="" href="#" target="">sample</A></LI>
          </UL>
        </DIV>
      </DIV>
    </DIV>
    </p>
  </div>
</div>
</div>
</body>
</html>
Some articles that might help you -
id vs. class
clearing floats with CSS
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Users who have thanked Excavator for this post:
BenR (01-22-2013)