Hallo

Twee <DIV> naast elkaar plaatsen is geen probleem ( float:left )
Nu zou ik graag de rechtse <DIV> een vaste breedte geven en de linkse opvullen.

De rechtse <DIV> met float:right voorzien en voor de andere plaatsen is geen optie.
Dit omdat de rechtse <DIV> onder de andere moet schuiven op kleinere schermen.

Kan iemand me helpen? Ik zoek dus een manier om :

- 2 <DIV> naast elkaar te plaatsen
- De rechtse moet onder de linkse kunnen schuiven
- De rechtse heeft een vaste breedte, de linkse vult de ruimte op
- Liefst met een margin tussen beide <DIV>

Zo moeilijk zou dit toch niet mogen zijn ? :-)

Wesley

Javascript, en media-queries voor het verschuiven van de DIV's onder elkaar.

Met javascript pak je de width van de container daar trek je de width van de rechter DIV af. Vervolgens geef je de linker DIV die breedte.

Dmv media-queries kun je vanaf bepaalde schermgroottes ze beide 100% maken en onder elkaar plaatsen. Daar moet je in de JS ook rekening mee houden.

Beide op float: left en de breedtes op basis van percentage oplossen.

Een eenvoudige oplossing (maar géén nette):
- rechtse blok een bepaalde width geven (pak 'm beet 300px)
- het linkse blok width:calc(100% -300px);

Vervolgens kan je alles gewoon middels mediaqueries oplossen.

Waarom niet netjes? Niet iedere browser ondersteund CALC() (http://caniuse.com/#feat=calc)

Je ziet het bij een standaard blog lay-out heel vaak. Links de content, rechts de sidebar. Meestal heeft de sidebar een minimale+maximale breedte, of is een percentage. Hier zijn twee voorbeelden waar de sidebar een vaste breedte heeft: http://radiatingstar.com/make-a-layo...d-size-columns. Ik zou het tweede voorbeeld niet volgen, dat renderen als tabel blijft een uitdaging.

Origineel gepost door B. van der Weerd

Je ziet het bij een standaard blog lay-out heel vaak. Links de content, rechts de sidebar. Meestal heeft de sidebar een minimale+maximale breedte, of is een percentage. Hier zijn twee voorbeelden waar de sidebar een vaste breedte heeft: http://radiatingstar.com/make-a-layo...d-size-columns. Ik zou het tweede voorbeeld niet volgen, dat renderen als tabel blijft een uitdaging.

Top ! Dat is wat ik nodig had ! ( vb : negative margin solution )
De de vaste breedte heb ik float:left vervangen naar right.
Zo kan ik gemakkelijk een margin voorzien tussen beide layers.
Ook komt de Div dan altijd mooi uit met de DIV erboven en eronder.