Подреждане и оразмеряване на div-oве.

[index]

Имам следният код :

         <code>

<div id='parent'><a href="http://localhost/webdir/categoria/index//zabavlenie/id/1" title="Категория :??????????" class="null">??????????</a>



<div id='child'><a href="http://localhost/webdir/categoria/index//movies/id/2" title="Категория :?????" class="nullest">?????</a></div>

<div id='child'><a href="http://localhost/webdir/categoria/index//animes-and-manga/id/3" title="Категория :???????" class="nullest">???????</a></div>

</div>



<div id='parent'><a href="http://localhost/webdir/categoria/index//shops/id/4" title="Категория :????????" class="null">????????</a>



<div id='child'><a href="http://localhost/webdir/categoria/index//for-food/id/5" title="Категория :?? ?????" class="nullest">?? ?????</a></div>

</div>



</code>

[css]

div#parent{

float:left;

margin: 10px;

border: 2px solid #CCCCCC;

-webkit-box-shadow: 0 0 8px #D0D0D0;

background-color: #E0E0E0;

}

div#child>a.nullest{

font-weight: bold;

margin-left: 45px;

padding-left: 16px;

background: url(http://ngoplanet-rawdog.googlecode.com/hg-history/2dfbce7a5ab0f885feba148ed1927799e33d1aca/images/opml-icon-32x32.png) no-repeat scroll left center;

background-size: 8px 8px;

}

code {

font-family: Consolas, Monaco, Courier New, Courier, monospace;

font-size: 12px;

background-color: #f9f9f9;

border: 1px solid #D0D0D0;

color: #002166;

display: block;

margin: 14px 0 14px 0;

padding: 12px 10px 12px 10px;

}
[/css]
Резултата който получавам е :

И въпроса ми е , как може полето code, да обхване всички div, не седи така "иклюпано", как да направя също и parent да са еднакво високи.
Един парент може да има 3 деца, а друг да има 1 .... и ще се получи ( поне така си го предсавям ) мозайка..... ?

 

[Galli]

Примерно.

div#parent {height:70px;} code {height:100px;}

Мисля, че има и по-добър начин. Също, май зависеше и от doctype на html.
А тези парент и чайлд аз бих ги направил с ul li, а не с div.

 

[Battleman]

Само да вметна - ползвай класове. "id=" е уникален атрибут.

 

[oniatam]

Използвай таблица за тази цел.
И най-добре ще е да го направиш както ти казаха... с <ul>,<li> i class вместо ид.

 

[kikity_94]

сложи на майчинския див overflow: hidden;

 

[Giorgio]

За унаквяване на размера на колоните може да погледнеш ето този линк. Там са дадени няколко метода за постигането на този ефект. Може ако знаеш колко ще е горе доло най-дългата колона да сложиш едно min-height: ... на другите

едит: използвай префиските и за останалите броузери на box-shadow prefixr.com

Поздрави,
Георги.

 

[index]

сложи на майчинския див overflow: hidden;

Това стана.
Обаче, нещо не успях да се справя с това което @Giorgio ми даде....

 

[kikity_94]

сложи на майчинския див overflow: hidden;

Това стана.
Обаче, нещо не успях да се справя с това което @Giorgio ми даде....

До колкото разгледах статията която ти е дал Георги разбрах от нея, че тя ще ти помогне относно втория ти въпрос - "как да направя също и parent да са еднакво високи." въпреки, че точно за тази цел както по нагоре казаха аз лично бих ползвал таблица, но защо?
Защото ще получиш доста по лесно желания ефект, а не да търсиш доста по сложни начини, въпреки, че има и по добри методи, но мисля , че така ще е доста по лесно и ефекта пак ще е същия, но ако вече не искаш таблици пиши, ще измислим нещо :lol:

 

[index]

сложи на майчинския див overflow: hidden;

Това стана.
Обаче, нещо не успях да се справя с това което @Giorgio ми даде....

До колкото разгледах статията която ти е дал Георги разбрах от нея, че тя ще ти помогне относно втория ти въпрос - "как да направя също и parent да са еднакво високи." въпреки, че точно за тази цел както по нагоре казаха аз лично бих ползвал таблица, но защо?
Защото ще получиш доста по лесно желания ефект, а не да търсиш доста по сложни начини, въпреки, че има и по добри методи, но мисля , че така ще е доста по лесно и ефекта пак ще е същия, но ако вече не искаш таблици пиши, ще измислим нещо :lol:

Просто искам да не използвам таблици.
Искам да повдигна малко левъла и да науча нещо ново.