Menu naast content

Zoiets: http://jsfiddle.net/kpouhnbr/

Ik heb er display table en table-cell van gemaakt, dit geeft straks heel veel voordelen in tegenstelling tot float

Jah zoiets, maar hoe krijg ik het menu nou aan de linkerkant zonder de HTML te veranderen?

Is dat belangrijk?

Want dit werkt gewoon:

<div class="main">
  <div class="zijmenu">Menu</div>
  <div class="content">Content</div>
</div>

Dat is belangrijk want voor mobile weergave moet het content boven de zijmenu weergegeven worden.

Je kan met javascript de elementen van volgorde laten wijzigen.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.

en als je menu een width geeft van 50%, content een width 50% en content laat floaten naar rechts?

http://jsfiddle.net/sulanum/64hucbmh/

als je je menu naast je content wilt floaten kun je ook je content een breedte geven aan de hand van overgebleven pixels en allebei alsnog naar links laten floaten.

Voorbeeld:

.zijmenu {
width: 200px; // vaste breedte
float:left;
}

.content {
float:left;
width: calc(100% - 200px); // hier is de 200px weer de breedte van het menu. INCLUSIEF padding, margins en borders.
}

Dat zou de truc moeten doen, op mobiel geef je ze allebei een breedte van 100% mee en eventueel een display:block; zodat ze onder elkaar komen te staan.

http://jsfiddle.net/gpxeF/1916/

Dit is het enigste manier dat ik het voor elkaar krijg alleen de tweede content en de footer schieten hierdoor naar boven.

http://jsfiddle.net/gpxeF/1918/

Kijk, wil je meer weten over flexbox kun je het beste even hier kijken:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Je was veel moeilijker bezig dan dat het is. Ik heb inline commentaar bijgeschreven voor wat wat is. Wel raad ik je aan om van te voren na te denken over de structuur van je website en wat bij elkaar hoort.

Tegenwoordig doe je dat met <header></header> tags, maar ik heb voor de duidelijkheid nog even <div> elementen gebruikt met ID's.

[size=xsmall]Toevoeging op 03/08/2015 13:26:58:[/size]

Robert Wazzaa op 03/08/2015 09:07:26

Je kan met javascript de elementen van volgorde laten wijzigen.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.

Wat een nog betere oplossing is:
Zet wat je links wilt laten zien als tweede in de html structuur en laat dit op de desktop links floaten.
Voor de mobiele versie haal je de float weg en komt deze er dus onder te staan.

Ik heb je opmaak gebruikt en een beetje aangepast hoe ik het wil hebben, ik heb het menu en content omgedraaid met flex-direction: row-reverse;

http://jsfiddle.net/gpxeF/1920/