У меня проблема с позицией CSS.
В принципе, я не знаю, есть ли проблема у внешнего div #contentarea или дочерних элементов #mainarea, #sidebar. #contentarea имеет постоянную ширину, скрытое переполнение и включает #mainarea & #sidebar. Оба они всплывают влево.
Я поместил код результата Google CSE в #mainarea.
Содержимое div #cse меняется на лету.
Проблема в том, что высота #contentarea на этой странице - высота боковой панели.
Cse div имеет больше контента, чтобы показать (но он скрыт)
Кажется, что высота #mainarea меняется также на лету, но не также для #contentarea
Как я могу решить это? У меня есть JSFiddle здесь .
Попробуйте написать Εξεταστική в JSFiddle. Он отлично работает в скрипке , но не в моем приложении.
Когда я комментирую, содержимое моей боковой панели тоже работает отлично.
Боковая панель исходного содержимого
<div id="sidebar">
<div id="news">
<div class="head">
<a id="last" class="active">Τελευταία νέα</a>
<a id="popular" class="inactive">Δημοφιλή νέα</a>
</div>
<div class="body">
<ul id="last">
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 1</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 2</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 3</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 4</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 5</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 6</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 7</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 8</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 9</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 10</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 11</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Τελευταία ανακοίνωση με αριθμό 12</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
</ul>
<ul id="popular">
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 1</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 2</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 3</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 4</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 5</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 6</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 7</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 8</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 9</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 10</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 11</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
<li><label class="datetime">28/11/2011 - 05:37:42</label><label class="hits">12 προβολές</label><a href="">Δημοφιλέστερη ανακοίνωση με αριθμό 12</a><label class="author">by kouts</label>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>
<div id="radio_adv">
<a href="/radio"><img src="/template/img/main/dap_radio.gif" width="329px" height="150px" title="Δαπ-Νδφκ Radio Ακούστε μας live" alt="Δαπ-Νδφκ Radio Ακούστε μας live"/></a>
</div>
<div id="social">
<a id="newsletter_bt"><img src="/template/img/main/newsletters.png" width="55px" height="55px" alt="Εγγραφείτε στην λίστα μας ώστε να σας στέλνουμε e-mails σχετικά με την σχολή" title="Εγγραφείτε στην λίστα μας ώστε να σας στέλνουμε e-mails σχετικά με την σχολή"/></a>
<a href="/app/rss" target="_blank"><img src="/template/img/main/rss.png" width="55px" height="55px" alt="Εγγραφείτε στην ροή ειδήσεών μας και μείνετε πάντα ενημερωμένει" title="Εγγραφείτε στην ροή ειδήσεών μας και μείνετε πάντα ενημερωμένει"/></a>
<a href="http://www.facebook.com/enhmerwsh.shmmy" target="_blank"><img src="/template/img/main/facebook.png" width="55px" height="55px" alt="Επισκεφθείτε την σελίδα μας στο facebook" title="Επισκεφθείτε την σελίδα μας στο facebook"/></a>
<a href="http://www.twitter.com/enhmerw_shshmmy" target="_blank"><img src="/template/img/main/twitter.png" width="55px" height="55px" alt="Επισκεφθείτε την σελίδα μας στο twitter" title="Επισκεφθείτε την σελίδα μας στο twitter"/></a>
<a href="http://www.youtube.com/user/enhmerwshshmmy" target="_blank"><img src="/template/img/main/youtube.png" width="55px" height="55px" alt="Επισκεφθείτε το κανάλι μας στο youtube" title="Επισκεφθείτε το κανάλι μας στο youtube"/></a>
</div>
<div style="width:329px;height:329px;position:relative;" class="fb-activity" data-width="329" data-height="329" data-header="true" data-border-color="#dadada" data-recommendations="true">
</div>
</div>
CSS для боковой панели:
#news {
width: 327px;
height: 365px;
position: relative;
clear: both;
margin-bottom: 10px;
}
#news .head {
width: 100%;
height: 25px;
}
#news .head a {
height: 20px;
margin: 0px 5px 0px 5px;
font-size: 0.8125em;
background: #f8f9fd;
padding: 5px 5px 0px 5px;
float: left;
border-left: 1px solid #dadada;
border-right: 1px solid #dadada;
border-top: 1px solid #dadada;
color: #333333;
cursor: pointer;
position: absolute;
z-index: 20;
}
#news .head .inactive {
border-bottom: 1px solid #f8f9fd;
background: #e2e5f2;
}
#news .body {
width: 100%;
height: 340px;
background: #f8f9fd;
border: 1px solid #dadada;
overflow: hidden;
}
#news .body ul {
float: left;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: visible;
position: relative;
background: #f8f9fd;
list-style-type: none;
}
#news li {
border-bottom: 1px dotted #a19393;
margin: 0px 8px;
position: relative;
height: auto;
clear: both;
}
#news li .datetime {
font-size: 0.625em;
float: left;
margin-top: 3px;
position: absolute;
color: #afa7a7;
}
#news li .author {
font-size: 0.625em;
position: absolute;
right: 0px;
bottom: 2px;
color: #afa7a7;
}
#news li .hits {
font-size: 0.625em;
float: right;
position: relative;
color: #afa7a7;
margin-top: 3px;
}
#news li a {
float: left;
margin-top: 8px;
margin-bottom: 5px;
width: 250px;
text-decoration: none;
font-size: 0.875em;
color: #e54949;
cursor: pointer;
text-align: justify;
}
#news li a:hover {
text-decoration: underline
}
#radio_adv {
width: 329px;
height: 150px;
background-color: black;
margin-bottom: 5px;
}
#social {
margin-top: 10px;
margin-bottom: 10px;
position: relative;
height: 55px;
: ;
}
#social img {
float: left;
margin: 0 5px 0 5px;
position: relative;
cursor: pointer;
}