knot22 knot22 - 4 months ago 8
HTML Question

placement of buttons so they don't get pushed down on page

Please run each code snippet separately and notice how the buttons get pushed down below the unordered list of items. The only difference between these code snippets are the number of list items. If there are many items, the buttons end up way down on the page. Is there a way to make the buttons show up under the "path contents:" label, regardless of how many list items appear?



ul
{
list-style-type: none;
display: inline-block;
vertical-align: top;
padding-left: 0px;
}

button
{
display: block;
margin-bottom: 10px;
}

label
{
display: inline-block;
width: 150px;
}

<div>
<label id="pathcontentsLbl">path contents:</label>
<span id="PathContents">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</span>
</div>

<button id="Run">Run</button>
<button id="Clear">Clear</button>







ul
{
list-style-type: none;
display: inline-block;
vertical-align: top;
padding-left: 0px;
}

button
{
display: block;
margin-bottom: 10px;
}

label
{
display: inline-block;
width: 150px;
}

<div>
<label id="pathcontentsLbl">path contents:</label>
<span id="PathContents">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
</ul>
</span>
</div>

<button id="Run">Run</button>
<button id="Clear">Clear</button>




Answer

Below is what I found works for this problem. The trick was using an outer container (class="container") and an inner container (class="buttons") and using the 'position' property along with the 'top' property in the CSS.

ul
{
	list-style-type: none;
	display: inline-block;
	vertical-align: top;
	padding-left: 0px;
}

button
{
	display: block;
	margin-bottom: 10px;
}

label
{
	display: inline-block;
	width: 150px;
}

.container
{
  position: relative;
}

.buttons
{
  position: absolute;
  top: 25px;
}  
<div class="container">		
		<label id="pathcontentsLbl">path contents:</label>
		<span id="PathContents">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
          </ul>
        </span>
  <div class="buttons">
  	  <button id="Run">Run</button>
	  <button id="Clear">Clear</button>
  </div><!--end buttons-->
</div><!--end container-->