[CSS] Verspringende floats

[hneel]

Ik heb het volgende probleem. Bij een pagina met 2 kolommen naast elkaar gaan die kolommen verspringen als je het scherm (heel veel) smaller maakt. Ze komen dan onder elkaar te staan. En dat wil ik niet.

Hier zie je een voorbeeld. Dit is niet mijn eigen site, maar een voorbeeld afkomstig van een tutorial site. Maar het heeft iig hetzelfde effect.

Cascading Stylesheet:

body { text-align: justify;}
h1 { margin-bottom: 20px;}
#middle { margin-right: 185px; margin-left: 185px; }
#left { float: left; clear: left; width: 175px;}
p { margin: 20 20; display: table;}
#right { float: right; width: 175px; }
#footer { clear: both; margin: 25 25; text-align: center; font-size: border-top: 1px solid black;}

Ik wil juist dat het bij verkleinen van het scherm gewoon buiten de rand komt te vallen. Veel andere sites hebben dat, maar als ik daar in de css kijk vind ik niet hoe ze het doen. Hoe los ik dit op?

[Rowanov]

Heb je een voorbeeld van je eigen site? Dit probleem heb ik nog nooit eerder gezien, behalve als er een container om de elementen heen zit die de ruimte beperkt. Een aantal dingen die je even kan checken:
• Correct html 4.01 strict doctype
• overflow op de body misschien naar visible zetten?

Dit is allemaal maar raden, een voorbeeld van je eigen code zou veel helpen.

[Xcalibur]

je kan een div rond de 2 floats plaatsen, die een mininumbreedte heeft (waar de 2 dus inpassen). Als je het scherm smaller maakt zal die div dus niet kleiner worden, en blijven je floats naast elkaar staan

[hneel]

De website in kwestie staat hier


Ik heb het overigens iets anders gedaan dan in het eerste voorbeeld. 2 left-floats naast elkaar:

Cascading Stylesheet:

div#nav
{
  float: left;
  width: 170px;
/*border: solid 1px black;*/
  background: #F8F8FF;
}

div#body
{
  float: left;
  margin: 1px;
/*border: solid 1px black;*/
  padding: 4px 8px 8px 20px; /* top right bottom left */
}

[ Voor 70% gewijzigd door hneel op 27-12-2006 17:38 ]

[Verwijderd]

Jij hebt sowieso al float:left, iets wat er dus voor zorgt dat wanneer jij de pagina naar te klein resized dat dan de inhoud onder de navigatie terecht komt...

Verder vind ik persoonlijk dat 'verspringen' alleen bij jouw site voorkomt. Bij de andere wrapt de tekst gewoon aan de hand van je window-grootte. Om dat vast te zetten zul je met iets als javascript moeten gaan werken. Of gewoon zo:

Cascading Stylesheet:

div#nav
{
  float: left;
  width: 170px;
  background: #F8F8FF;
}

div#body
{
  width: 100%;
  margin-left: 170px;
}

Je zou ook evt. kunnen overwegen om fixed-sized te werken. Dus gewoon de nav-bar is 100px breed, de inhoud is 650px breed. En iedereen die een beeldscherm heeft wat nog niet met 800x600 overweg kan, die heeft dan gewoon pech...

[edwinistrator]

je wil geen floats gebruiken maar een 3 colums css layout Weet eigelijk niet of ze hier geen floats gebruiken maar ze komen niet onder elkaar..

[PeterSelie]

edwinistrator schreef op donderdag 28 december 2006 @ 12:08:
je wil geen floats gebruiken maar een 3 colums css layout Weet eigelijk niet of ze hier geen floats gebruiken maar ze komen niet onder elkaar..

Maak je de site echter te klein dan verdwijnt de rechter colum achter de middelste en linker, en dat was ook niet helemaal de bedoeling als ik het zo begrijp. Op een gegeven moment moeten de colums gewoon stoppen met resizen en buiten het scherm vallen

[edwinistrator]

SoaDmaggot schreef op donderdag 28 december 2006 @ 12:19:
[...]

Maak je de site echter te klein dan verdwijnt de rechter colum achter de middelste en linker, en dat was ook niet helemaal de bedoeling als ik het zo begrijp. Op een gegeven moment moeten de colums gewoon stoppen met resizen en buiten het scherm vallen

de logica ontgaat me een beetje waarom je dat perse zou willen

[hneel]

Ik heb nu alles in een al-omvattende div gegooid met een vaste breedte, en dat lost het probleem op.