...

View Full Version : Expanding parent Div when child generates text



BenR
01-22-2013, 06:02 PM
Hello everyone and thank you for taking the time to read and respond.

I am trying to create a form with "spoiler" drop downs that expand a <ul> for people to select their specific subcategory. Some <ul>s are quite long and expand way past the parent container's limits. I do not want to make the containers massive and spread all of the contents out. When users press the 'expand/show' button, I would like the parent container to expand to the size of the <ul> without enabling a scroll bar.

I've played with all of the overflow settings and can't seem to get what I want. It worked in IE8 but not IE9, chrome, or FF.

Here's my code.




.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%;
height: 160px;
margin: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background: rgb(245,246,247);




}

#box {

width: 200px;
height: 150px;
margin: auto;
padding: 5px;
margin-left: 10px;
margin-right: 20px;
text-align: left;
float: left;

}


and a sample of the mark up




<!DOCTYPE HTML>

<head>
<title>Sample Guy (using CSS)</title>
<link rel="stylesheet" type="text/css" href="primary.css">
</head>

<body>

<div id="container">
<div id="header"><span class="h1"> HEADER SAMPLE </span><br><span class="h2">Cardiac/Respiratory Arrest</span></div>
<div id="line">
<div id="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 id="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 id="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 id="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 id="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 id="line">
<div id="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 id="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 id="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 id="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 id="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>



Thanks so much!
-BR

VIPStephan
01-22-2013, 06:17 PM
Read up on Containing Floats (http://www.complexspiral.com/publications/containing-floats/).

Excavator
01-22-2013, 06:34 PM
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:
<!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 (http://www.tizag.com/cssT/cssid.php)
clearing floats with CSS (http://www.quirksmode.org/css/clearing.html)

BenR
01-22-2013, 07:37 PM
Thank you both for your response.

Excavator: I've saved the validation links in your sig. That's going to start being my go to before posting any questions.

I replaced the height specification with min-height which seems to be behaving the correct way while still spacing things nicely.

Did some reading on the id vs class from a few sources. From what I understand, they behave the same but classes should be used for repeating elements and an id for a singular element. I cannot fully understand why, however I will keep reading.

Learning how to float appropriately is something I will have to mess around with a lot more. I tried putting my .box inline but I could not accomplish the same effect without floating the .box.

I've got some more reading and experimenting to do. Thank you for steering me in the right direction.

Excavator
01-22-2013, 08:10 PM
Learning how to float appropriately is something I will have to mess around with a lot more. I tried putting my .box inline but I could not accomplish the same effect without floating the .box.



You're on the right track, floats are the way to go here. A tutorial might help explain some things to you - http://css.maxdesign.com.au/floatutorial/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum