Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,635
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Read up on Containing Floats.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    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

  • Users who have thanked Excavator for this post:

    BenR (01-22-2013)

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •