Witam, potrzebuje dopasować środkowy div .webticker, który ma się dostosować do długości ekranu oraz do pozostałych dwóch divów, których długość musi pozostać statyczna. Korzystam z jQuery WebTicker do przewijania tekstu.

Wygląda to tak:



CSS:

[HTML] pobierz, plaintext 
.webticker {
  width: 89%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.65); 
  color: rgb(6, 6, 6);
  font-weight: bold;
  border-bottom: 5px solid rgba(6, 6, 6, 0.8);
  border-top: 5px solid rgba(6, 6, 6, 0.8);
  height: 40px;
  float: left;
  margin-top: 3.5px;
  display: block;
  font-size: inherit !important;
  position:relative;
}
.marquee{
    font-size: inherit !important;
}
.mqinfo{
    width: 100px;
    float: left;
    height: 47px;
    background-color: rgb(6, 6, 6);
    padding: 12.6px;
    text-align: center;
    font-weight: bold;
    color: hsl(200, 100%, 70%);
    min-width: 100px;
}
.mqend{
    width: 20px;
    float: left;
    height: 47px;
    padding-top: 14px;
    background-color: rgb(6, 6, 6);
    text-align: center;
    font-weight: bold;
    color: hsl(200, 100%, 70%);
    min-width: 20px;
 
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
 <div id='informacje' style="width: 100%; height: 50px; overflow: hidden;">
            <div class='mqinfo'>#INFO</div>
            <div class='webticker'>
                <ul class="marquee">
                    <?php 
                    $n = $db->query();
                    $c = 1;
                    foreach($n as $b){
                        echo "<li data-update='item$c'>&nbsp;&nbsp;".$b[0]."&nbsp;&nbsp;||</li>";
                        $c++;
                    } ?>
                </ul>
            </div>
</div>
[HTML] pobierz, plaintext 

JS:

[HTML] pobierz, plaintext 
            $(document).ready( function(){
                $(".marquee").webTicker({
                    height:'30px', 
                    speed: 150,
                    duplicate:true, 
                    rssfrequency:0, 
                    startEmpty:false, 
                    hoverpause:true, 
                    transition: "ease"
                }); 
                <?php if($uagent_obj->DetectIphoneOrIpod() == 1 || $uagent_obj->DetectAndroidWebKit() == 1 || $uagent_obj->DetectSymbianOS() == 1 || $uagent_obj->DetectWindowsMobile() == 1 || $uagent_obj->DetectGameConsole() == 1 || $uagent_obj->DetectMobileQuick() == 1){ ?>
                $('.webticker').css('width', '0%'); 
                $(".mqend").html("<img src='images/arrow-left.png' height='20px' />");
                $('.marquee').webTicker('stop');
                var pokaz=false;   
                <?php } else {  ?> 
                var pokaz=true;
                <?php } ?> 
                $(".mqend").click(function(){
                    if(pokaz){
                        pokaz = false;
                        $('.marquee').webTicker('stop');
                        $(".webticker").stop().animate({ width: '0%' }, 2000, "swing");
                        $(this).html("<img src='images/arrow-left.png' height='20px' />")
                    } else {
                        pokaz = true;
                        $('.marquee').webTicker('cont');
                        $(".webticker").stop().animate({ width: '88%' }, 2000, "swing");
                        $(this).html("<img src='images/arrow-right.png' height='20px' />");   
                    }
                });       
            });
[HTML] pobierz, plaintext 

https://www.w3schools.com/css/css_positioning.asp