---

Jeg har nogle divs med en header, et billede og lidt tekst.
Billedet skal være til venstre i containeren og teksten ska stå til
højre for billedet. Billedet er højere end teksten og er float:left.
Jeg forstår at float tager billedet ud af det overornede flow og derfor
får containeren kun højden af teksten, mens billedet 'rager uden for':
http://jems.dk/test/enineeringEquipment/none.html

Hvis jeg også giver containeren float:left, virker det fint:
http://jems.dk/test/enineeringEquipment/float.html

Er det fordi containeren og billedet nu er i det samme flow?

Hvis jeg gerne vil centrere de to kolonner på siden og kan styre
mellemrummet mellem dem, hvad er så den 'rigtige' måde at gøre det på?
Jeg forestiller mig at lave to divs med width:50%; float:left og så
putte mine containere i dem. Containere i venstre kolonne er
float:right; margin-right (mellemrum/2) og vice verca for den højre kolonne?

Mvh
Stefan

---

Stefan Kristensen skrev:
> Jeg har nogle divs med en header, et billede og lidt tekst.
> Billedet skal være til venstre i containeren og teksten ska stå til
> højre for billedet. Billedet er højere end teksten og er float:left.
> Jeg forstår at float tager billedet ud af det overornede flow og derfor
> får containeren kun højden af teksten, mens billedet 'rager uden for':
> http://jems.dk/test/enineeringEquipment/none.html
>
> Hvis jeg også giver containeren float:left, virker det fint:
> http://jems.dk/test/enineeringEquipment/float.html
>
> Er det fordi containeren og billedet nu er i det samme flow?
>
> Hvis jeg gerne vil centrere de to kolonner på siden og kan styre
> mellemrummet mellem dem, hvad er så den 'rigtige' måde at gøre det på?
> Jeg forestiller mig at lave to divs med width:50%; float:left og så
> putte mine containere i dem. Containere i venstre kolonne er
> float:right; margin-right (mellemrum/2) og vice verca for den højre
> kolonne?

Herunder et ud-af-ærmet forslag:

#page { /* midtstille alt indhold */
width:whatever:
margin:0 auto;
....}
..equimentGroupLeft {
width:45%;
float:left;
....}
..equimentGroupRight {
width:45%;
float:Right;
....}
..clear {/* clearing af hver række */
clear:both;height:0;font-size:0;}

<div id="page">
<div class="row"
<div class='equipmentGroupLeft'>
<h3>Auxiliary Power Controls</h3>
<img src="auxiliaryPowerControls.jpg"/>
<p>Supplementary systems providing a
flat boost to powercore energy.</p>
</div>

<div class='equipmentGroupRight'>

<h3>Capacitor Batteries</h3>
<img src="capacitorBatteries.jpg"/>
<p>Allow the capacitor to store more energy.</p>
</div>
<div class="clear"></div>
</div><!-- /row -->

</div><!-- /page -->
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

>> Hvis jeg gerne vil centrere de to kolonner på siden og kan styre
>> mellemrummet mellem dem, hvad er så den 'rigtige' måde at gøre det på?
>

> Herunder et ud-af-ærmet forslag:

8<

Tak, det er også en mulighed. Men jeg kan egentlig bedre lide det her,
der er mindre 'kode':
http://jems.dk/test/enineeringEquipment/center.html

Kan du fortælle mig om min antagelse of flow er rigtig?

>Jeg forstår at float tager billedet ud af det overornede flow og
derfor >får containeren kun højden af teksten, mens billedet 'rager uden
for':
>http://jems.dk/test/enineeringEquipment/none.html

>Hvis jeg også giver containeren float:left, virker det fint:
>http://jems.dk/test/enineeringEquipment/float.html

>Er det fordi containeren og billedet nu er i det samme flow?


Mvh
Stefan

---

"Stefan Kristensen" <jems@mad.dk> skrev i en meddelelse
news:4ba4c975$0$36570$edfadb0f@dtext01.news.tele.dk...
>>> Hvis jeg gerne vil centrere de to kolonner på siden og kan styre
>>> mellemrummet mellem dem, hvad er så den 'rigtige' måde at gøre det på?
>>
>
>> Herunder et ud-af-ærmet forslag:
>
> 8<
>
> Tak, det er også en mulighed. Men jeg kan egentlig bedre lide det her, der
> er mindre 'kode':
> http://jems.dk/test/enineeringEquipment/center.html
>

I IE7 vælter dit layout og er venstrestillet....

Tom

---

Stefan Kristensen skrev:
>>> Hvis jeg gerne vil centrere de to kolonner på siden og kan styre
>>> mellemrummet mellem dem, hvad er så den 'rigtige' måde at gøre det på?
>>
>
>> Herunder et ud-af-ærmet forslag:
>
> 8<
>
> Tak, det er også en mulighed. Men jeg kan egentlig bedre lide det her,
> der er mindre 'kode':
> http://jems.dk/test/enineeringEquipment/center.html

Ganske rigtigt, men det forudsætter at boksene stedse
er lige høje. Jeg introducerede .row-elementet for at
sikre et "true grid", uanset højden af rækkens enkelte
elementer. Det var i hvert fald tanken.

> Kan du fortælle mig om min antagelse of flow er rigtig?
>
> >Jeg forstår at float tager billedet ud af det overornede flow og
> derfor >får containeren kun højden af teksten, mens billedet 'rager uden
> for':
> >http://jems.dk/test/enineeringEquipment/none.html

Din antagelse er rigtig, men med en hel del forbehold,
som det er lidt svært for mig at forklare i et kort
svar som dette. Jeg bruger faktisk en snes sider
på emnet i min nedennævnte bog om Webdesign med stylesheets.

> >Hvis jeg også giver containeren float:left, virker det fint:
> >http://jems.dk/test/enineeringEquipment/float.html
>
> >Er det fordi containeren og billedet nu er i det samme flow?

Nej. float:left på .equipmentGroup medfører at at elementer
der følger efter i kildekoden flyder op på højre side
af det floatede element. In casu er de efterfølgende
element også left-floatede, og den eneste grund til
at du ikke får tre eller flere elementer i rækken
er den relativebredde af elementerne.

Det der er interessant i det enkelte .equipmentGroup
element er forholdet mellem billede og tekst. Billedet
skubber teksten til højre, /men ikke/ tekst-elementet
p. Hvis du derfor har flere linjer tekst end tilfældet
er vil du opleve at teksten under billedet flyder
ud i venstre margin. Prøv at gøre browservinduet ganske
smalt, så byder dit layout sammen.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

> Din antagelse er rigtig, men med en hel del forbehold,
> som det er lidt svært for mig at forklare i et kort
> svar som dette. Jeg bruger faktisk en snes sider
> på emnet i min nedennævnte bog om Webdesign med stylesheets.

Jeg takker for den korte introduktion
Bogen er bestilt på biblioteket.

Også tak til Tom og Birger for jeres kommentarer.

Mvh
Stefan

---

Stefan Kristensen sendte dette med sin computer:
> Jeg har nogle divs med en header, et billede og lidt tekst.
> Billedet skal være til venstre i containeren og teksten ska stå til højre for
> billedet. Billedet er højere end teksten og er float:left.
> Jeg forstår at float tager billedet ud af det overornede flow og derfor får
> containeren kun højden af teksten, mens billedet 'rager uden for':
> http://jems.dk/test/enineeringEquipment/none.html
>
> Hvis jeg også giver containeren float:left, virker det fint:
> http://jems.dk/test/enineeringEquipment/float.html
>
> Er det fordi containeren og billedet nu er i det samme flow?
>
> Hvis jeg gerne vil centrere de to kolonner på siden og kan styre mellemrummet
> mellem dem, hvad er så den 'rigtige' måde at gøre det på?
> Jeg forestiller mig at lave to divs med width:50%; float:left og så putte
> mine containere i dem. Containere i venstre kolonne er float:right;
> margin-right (mellemrum/2) og vice verca for den højre kolonne?
>
> Mvh
> Stefan

En almindelig "smutter":
med bredde på 50%, er der plads til 2 ved siden af hinanden - og så
skal der lige være lidt padding eller margin, og så er der ikke plads
mere.
bredde (og højde) er *uden* padding og margin.
Så du skal holde dine containere rene - sæt evt padding og margin til
0px.
Hvis der så skal være afstand, skal det gøres på de elementer du sætter
ind i containerne.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk