[xhtml] div'y obok siebie?? Opcje

[Raven82]

Mam maly problem, chce zbudowac cala stronke na div'ach,

ale JAK DO CH....Y UMIESCIC DWA DIV'y OBOK SIEBIE ???

Mam nastepujacy kod:
[xml:1:5157ac0ae9]
<STYLE>
DIV {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: transparent; display: block; border: none; width: 100%; border: 2px solid #FFFFFF;}

DIV.all {background-image: url("tlo_pens2.jpg"); background-repeat: no-repeat; text-align: center; width: 700px; }

DIV.logo {text-align: center; height: 100px; }

DIV.menu {width: 150px; height: 300px; cursor: default; text-align: left; display: inline; color:#FFFF00; font-size:10pt;}
</STYLE>


<div class="all">
<div class="logo"> Miejsce na logo </div>

<div class="menu">Menu, tez na div'ach </div> <div class="main"; >Tresc</div>

<div>Stopka</div>

</div>
[/xml:1:5157ac0ae9]

Tak mniej wiecej wyglada uproszczony szkielecik stronki, oparte mam wszystko na div'ach i stylach.

Moze czegos nie zauwazylem??

Dopiero zaczynam zabawe z HTML'em i php, a tym bardzeij na div'ach.
Wczesniej wszystro skladalem na tabelach.

[enceladus]

Ale pokręciliście: w CSS-ie mozemy wyszczegolnic pewne typy elementów definiowane parametrm display, są to:
- block
- inline
- list-item
- none
z kolei tagi htmlowe mają określony domyślny typ i tak np. div to block, span to inline, a to inline itd... ale nic nie stoi na przeszkodzie aby to przedefiniwać:

Kod

div { display: inline; }

span { display: block; }

Rodzaje najlepiej wyrazić rysunkiem:

Kod

--------------------

|##################|

|#####@@@@@@@@@@@@@|

|@@@@@*******&&&&&&|

|&&&&&             |

|                  |

--------------------

Ramka to element blokowy, #,@,*,& - to koleje ciągłe elementy liniowe
Tak jak napisał Dominik nie może mieć wymiarów element liniowy (zawęził jednak tylko do span). Dla elementu blokowego jest to jak najbardziej możliwe.
Aby zobaczyć różnicę warto np. zrobić coś takiego
[xml:1:a223ee0b49]
<div style="border:1px solid #000000; padding: 5px;width: 50px">
<span style="border: 1px solid #FF0000">ssd sad fljfdk fjldf erew rdsfds</span>
<span style="border: 1px solid #00FF00">ssdsad fljf dkfj ldfe rewr dsfds</span>
<span style="border: 1px solid #0000FF">ss dsadf ljfdkfj ldfer ewrd sfds</span>
</div>
[/xml:1:a223ee0b49]
Jeśli zaś chodzi o pytanie tytułowe to wystarczy zrobić coś takiego:

Kod

-----------------------------

|-----------    ------------|

||         |    |          ||

||    div1 |    |  div2    ||

||         |    |          ||

|-----------    ------------|

-----------------------------

[xml:1:a223ee0b49]
<style>
div#div1 { float: left }
div#div2 {float: right }
</style>
<div id="div1">Lewy obszar</div>
<div id="div2">Prawy obszar</div>
[/xml:1:a223ee0b49]