Hey,

Ik ben dus voor de grap me 3e layout aan het slice en dat verloopt allemaal prima maar ik heb een klein vraagje.

Ik heb een menu aan de linkerkant en dan daarnaast de content. Deze moeten naast elkaar staan maar ook met elkaar meerekken, ik weet alleen niet hoe ik dat moet maken.

De linker menu staat gewoon gepositioneerd met alleen een margin-top maar de content die heeft een margin-top van -768px zodat hij naast de linker menu staat, als alleen de content langer wordt dan 768px dan zakt de content naar benenden, en dat moet niet, ze moeten beide naast elkaar staan en ook met elkaar meerekken, hoe doe ik dat?

Het stukje code:

#menu {
	margin-top: 10px;
	background-color: #282828;
	width: 200px;
	min-height: 768px;
	border-top: 2px solid #5b1f1f;
	border-left: 2px solid #5b1f1f;
	border-right: 2px solid #5b1f1f;
	border-bottom: 2px solid #5b1f1f;


}


#content {
	margin-left: 210px;
	margin-top: -772px;
	background-color: #282828;
	width: 760px;
	min-height: 768px;
	border-top: 2px solid #5b1f1f;
	border-left: 2px solid #5b1f1f;
	border-right: 2px solid #5b1f1f;
	border-bottom: 2px solid #5b1f1f;
	
}

Live demo van het probleem: http://www.vlieg.rapifia.nl/

Ze staan nu gewoon naast elkaar maar als de menu 1px langer wordt dan gaat de content 1 px omlaag. Hoe fix ik dit?

MVG.

Citaat van Joyeria

De content en de left column zet je naast elkaar met een float. Niet met een margin-top: ...;

Dus vervang deze door

PHP

float: left;

Nu valt de content helemaal weg.

Citaat van Patrick

met margin-top: 10px komen ze naast elkaar op de zelfde hoogte te staan (ieder geval in chrome), daarnaast als je ze met elkaar mee wilt stretchen moet je een css hack in die richting doen aangezien dit niet standaard zit in gebakken,

voor dat verwijs ik je even naar google met "stretch nav with content"

Daarmee kwam ik uit op position: absolute; alleen nu staat het heel raar. Kijk maar even op de live demo.

Citaat van Malik

Waar gebruik je margin in de min?

Wat je zou kunnen doen:

<div> <!-- Deze div is dus met 1 lange BG -->
<div></div> <!-- content -->
<div></div> <!-- wrapper -->
</div>

Omdat anders de content helemaal laag staat en als ik hem in de min doet staat hij perfect alleen dan rekt hij niet uit.

Die extra div toevoegen werkt niet.

Gedaan. :cheer:

Bedankt!

Het is opgelost. :cheer:

:slotje: