Alignment of Collapsible div's in an HTML page

StackOverflow https://stackoverflow.com/questions/6817642

문제

I'm hoping someone can help me with collapsible div tags.

What I want to do is to create a list with multiple collapsible 2-column sections. The sections are designed with div tags and embedded into a list.

My code so far works in IE, but not in Firefox or Chrome. In the latter two, the list items move to the right when a 2-column sample is expanded.

The code below reproduces the problem. If you open it in Mozilla or Chrome and click on the [ ] in the first sample item, the bullet item for the sample below will move to the right.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="jquery-1.4.4.js"></script>  
<style type="text/css">
div.sample {
position:relative;
left:0px;
}  
div.item {
position:relative;
display:none;
width:600px;
left:10px;
text-align:justify;
}

div.ltcol{
float:left;
width:45%;
}

div.rtcol{
float:right;
width:45%;
}

</style>

</head>

<body>

<ul>
<li><div id="sample1" class="sample">Sample <a href="#" OnClick="showone('verbiage1');">[&nbsp;]</a>
<div id="verbiage1" class="item">
<div id="source" class="ltcol">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>

<li><div id="sample2" class="sample">Sample <a href="#" OnClick="showone('verbiage2');">[&nbsp;]</a>
<div id="verbiage2" class="item">
<div id="source" class="ltcol">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="target" class="rtcol">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div></div></li>

<script>
//Quick and dirty javascript to get it up and running.
alldivs=['verbiage1','verbiage2'];

function showone(name) {
 divname="#".concat(name);
for (var i in alldivs){
if ("#".concat(alldivs[i])==divname){
   $(("#".concat(alldivs[i]))).toggle(200);
  }
  else{
      $(("#".concat(alldivs[i]))).hide(200);
  }
 }
  return true;
};

</script>

</body>
</html>

Any help is appreciated.

도움이 되었습니까?

해결책

If I'm understanding your problem correctly you need to clear your verbiage div's. See this fiddle for reference: http://jsfiddle.net/Ujw5b/

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
   overflow: visible;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top