Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Expanding parent Div when child generates text

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-22-2013, 06:02 PM   PM User | #1
BenR
New Coder

 
Join Date: Jan 2013
Posts: 11
Thanks: 3
Thanked 0 Times in 0 Posts
BenR is an unknown quantity at this point
Expanding parent Div when child generates text
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.

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

Code:
<!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
BenR is offline   Reply With Quote
Old 01-22-2013, 06:17 PM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,607
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Read up on Containing Floats.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
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)
Old 01-22-2013, 07:37 PM   PM User | #4
BenR
New Coder

 
Join Date: Jan 2013
Posts: 11
Thanks: 3
Thanked 0 Times in 0 Posts
BenR is an unknown quantity at this point
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.
BenR is offline   Reply With Quote
Old 01-22-2013, 08:10 PM   PM User | #5
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
Quote:
Originally Posted by BenR View Post
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/
__________________
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
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 01:52 PM.
Advertisement
Log in to turn off these ads.