Div v divu in problem z višino - overflow: auto

Višina diva, problem, css trik
Sam se večkrat srečam s problemom višin in tale kratek CSS trik mi vedno pomaga. Problem je namreč, da višina vsebinskega dela ne sledi višini levega ali desnega stolpca in vse skupaj izpade sila neprofesionalno. Na ta problem najpogosteje naletite, ko izdelujeto postavitev za spletno stran.


Rešitev za to je overflow: auto, ki ga določite divu, ki predstavlja vsebinski del (,ki ni vedno višji od stolpcev).



Prikaz divov brez overflow: auto

1_stolpec_visji_vsebina



Prikaz divov, kjer ima vsebinski del določen overflow: auto

2_css_trik



HTML in CSS koda za zgornji prikaz:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body{background: #ffdae3;}
.zunanjiDiv{
    width: 400px;
    text-align: right;
    border: 2px solid #ff4071;
    overflow: auto;
}
.notranjiDiv{
    float: left;
    width: 200px;
    background: #ff4071;
    border: 2px solid #fff;
}
</style>
</head>

<body>

<div class="zunanjiDiv">
    <div class="notranjiDiv">
        <p>Stolpec je višji, kot vsebina.</p>
        <p>Stolpec je višji, kot vsebina. </p>
        <p>Stolpec je višji, kot vsebina.</p>
        <p>Stolpec je višji, kot vsebina.</p>
    </div>
   
    <p>Vsebinski del</p>
    <p>je manjši, kot levi stolpec</p>

</div>
</body>
</html>

 

 

Upam, da vam CSS postavitve speltnih strani sedaj ne bodo več delale takih preglavic.

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.