Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:

Ahoj.

Mám zhruba takovou kostru:

<div class="obsah-hp">
        <div class="obsah-content">
            <div class="table-nabidky">
                <h3>NEJNOVĚJŠÍ <strong>NABÍDKY</strong></h3>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ČÍSLO</th>
                            <th>TYP</th>
                            <th>ČÁSTKA</th>
                            <th>LOKALITA</th>
                            <th>DETAIL</th>
                        </tr>
                    </thead>
                    <tr>
                        ...
                    </tr>
                    <tr>
                        ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                </table>
            </div>
            <div class="table-poptavky">
                <h3>NEJNOVĚJŠÍ <strong>POPTÁVKY</strong></h3>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ČÍSLO</th>
                            <th>TYP</th>
                            <th>ČÁSTKA</th>
                            <th>LOKALITA</th>
                            <th>DETAIL</th>
                        </tr>
                    </thead>
                    <tr>
                       ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                </table>
            </div>
        </div>
        </div>
            <div class="box-try">
                <p class="text-try">ZADEJ SVOJI <strong>POPTÁVKU</strong> HNED TEĎ ZCELA <span style="color:#DBAA34;">ZDARMA!</span>
            </div>

To jsou dvě části, které mám a chci mít nad sebou (dvě tabulky jsou vedle sebe, pod tím je box s nápisem, viz screen)

Styly jsou následující:

.obsah-hp {
    min-height: 400px;
    height: 550px;
    max-height: 550px;
}
.obsah-content {
    max-width: 960px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
}
.obsah-content .table-nabidky, .obsah-content .table-poptavky {
    width: 456px;
    float: left;
    margin-left: 20px;
}
.box-try {
    margin-bottom: 40px;
}

Děje se to, že teď mám pro statickou variantu a doladění designu v tabulce deset řádků a box-try umístěný akorát pod tím, jenže pokud třeba napíšu do typu půjčky nějaký delší název, tak se tabulka natáhne logicky dolů, ale box-try tam zůstane a část tabulky je tím jakoby překrytá. Nejde mi nijak nastavit, aby výška celého obsah-content dědila podle výšky nejdelší tabulky a aby box-try držel pěkně pod tím, vždy stejně.. Pod tím je ještě patička, která jakoby drží v jednom bloku s box-try..

Když pak dělám responzivitu, musím box-try nastavit asi 20krát @media pro 20 různých šířek obrazovky, odstupnovaných po 20px aby ta stránka držela a obsah se nepřekrýval.. Jak mám docílit toho, aby ta výška obsah-hp držela pěkně a další věci, co jsou i v kodu v divech pod tím, byly až potom a nepřekrývaly se?

Díky! :)

 
Odpovědět 13. března 13:50
Avatar
Michal Žůrek (misaz):

Za poslední koncovou značku

<div class="table-poptavky">

dáš

<div style="clear:both;"></div>
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 13. března 14:11
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Kuba
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Kuba:

No, právě že to ale nefunguje, to už jsem zkoušel všelijak :/

 
Nahoru Odpovědět 13. března 14:13
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Michal Kuba
Tomáš123:

Dodaj prosím obšírnejší kód, ideálne ukážku, s ktorou sa bude dať pracovať.

Nahoru Odpovědět 13. března 14:21
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Michal Kuba
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Kuba:

Tak jsem trochu kecal! :D Musel jsem vymazat tu výšku toho divu a už to funguje :)

 
Nahoru Odpovědět 13. března 14:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.