Forum Mjukvara Programmering och digitalt skapande Tråd

CSS: width

1
Skriv svar
Permalänk
Medlem
●

CSS: width

Min layout är enligt följande:

<body>
<div id="wrapper">
<div id="mainContent"></div>
<div id="sidebar"></div>
</div>
</body>

Jag struntar i fylla in header/footer etc.

* Wrappern har en width: 80% och är centrerad så man ser bakgrunden på bodyn till vänster och höger om wrappern.

* Inne i wrapper diven floatar jag sidebar åt vänster och mainContent till höger.

Innan hade jag sidebar width: 20% och mainContent width: 80% men när man sedan t.ex. maximerar fönstret blir sidebaren alldeles för stor med sina 20%.

Det jag vill är att sidebar skall vara alltid t.ex. 200px, medan mainContent skall uppta resterande yta som är ledig inne i wrappern, dvs all yta höger om sidebaren.

Tips?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag skrev om detta för några veckor sen men fick ingen respons alls. Hursomhelst, det sätt jag kom på som verkar fungera bra är följande:

<style>
	#wrapper {height:20em; padding-right:200px;}
	#main {background:#cea; float:left; height:100%; width:100%;}
	#side {background:#ace; float:left; height:100%; margin-right:-200px; width:200px;}
</style>
<div id="wrapper">
	<div id="main">
	</div>
	<div id="side">
	</div>
</div>

padding på wrappern == sidebars bredd, 100% bredd på #main får den att ta upp 100%-200px (eftersom padding inte räknas till bredd)
margin-right:-200px för att dra ut sidebaren i det utrymme som wrapperns padding-right lämnat efter sig.

edit: här är den gamla tråden: http://www.sweclockers.com/forum/showthread.php?s=&threadid=9...

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nice, funkar exakt som jag ville. Tack

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara