Css problem pri postavitvi div-ov

376

28. maj 2010 ob 08:51

Link do slike: http://file.si/public/view/full/40678

Torej html mora biti tak kot je na sliki desno. Če samo flotam dive levo, se ne postavijo tako kot prikazuje slika. Ima kdo kaksno idejo?

1525

spletne strani

sonysony

28334710511

28. maj 2010 ob 08:58

če določiš širino in narediš okvirje bi zadeva morala delovat...

torej tako kot imaš na sliki, bi moralo biti takole:

<div style="float:left; width:300px;">
  <div></div>
  <div></div>
  <div></div>
</div>
<div style="float:left; width:500px;">
  <div></div>
  <div></div>
</div>

lp, mitja

nobodyelse

376

28. maj 2010 ob 09:49

Ma problem je ker mora biti html tocno tak kot je na sliki, ker se te divi avtomatsko zgenerirajo in ne morem dati npr. zadnje dva div-a v svoj div, kot si ti napisal.

OvcaX

275145711194281

28. maj 2010 ob 10:45

Nekako takole

#vsiDivi {
    width: 400px;
    height: 200px !important;
    border: 1px solid green;
}
    #vsiDivi div {
        border: 1px solid red;
        width: 150px;
        height: 40px;
        margin-bottom: 20px;
        margin-left: 20px;
        float: left
    }

Različne višine pa lahko samo z contentom (vsaj, da bi jaz vedel ne gre)

nobodyelse

376

28. maj 2010 ob 11:02

Visina je dinamična ja in tudi meni nikakor ne rata.. hvala za odgovor

OvcaX

275145711194281

28. maj 2010 ob 11:07

Sej če daš višino stran pa napolneš z contentom se bodo isto pometal

nobodyelse

376

28. maj 2010 ob 11:13

Sem probal tole:

<style type="text/css">

.vsiDivi {
width: 400px;
height:200px !important;
border: 1px solid green;
}
.vsiDivi div {
border: 1px solid red;
width: 150px;
margin-bottom: 20px;
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<div class="vsiDivi">
    <div class="div">
        <ul>
            <li>blabla</li>
        </ul>
    </div>
    <div class="div">
        <ul>
            <li>blabla</li>
            <li>blabla</li>
            <li>blabla</li>
            <li>blabla</li>
        </ul>
    </div>
    <div class="div">
        <ul>
            <li>blabla</li>
        </ul>
    </div>
</div>
</body>

In zadnjega diva ne vrze gor takoj pod prvega: http://www4.slikomat.com/10/0528/idj-Untitl.gif

carli

12585835417

28. maj 2010 ob 11:18

Če ti ni problem JavaScript potem si poglej kaj takega: http://blog.creativityden.com/fluid-grid-using-jquery/. Obstaja več teh pluginov pa se nobenega sedaj ne spomnim :(

1