Archief - 100% width layout met fixed aside

Bram · 6 feb 2011

Hey iedereen

Ik zit met een HTML/CSS ei:

Ik probeer een layout te maken die de volle breedte van m'n scherm in neemt, maar die een vaste sidebar heeft van 20em.

Wat code:

HTML:

<body>
	<aside>
		...
	</aside>
	<div id="content">
		<form>
			<ul>
				<li><label>Lorem</label><p><input /></p></li>
				<li><label>Lorem</label><p><input /></p></li>
				<li><label>Lorem</label><p><input /></p></li>
			</ul>
		</form>
	</div>
</body>

M'n CSS voor de structuur ziet als volgt uit:

Code:

#content{
	margin: 0 0 0 20em;
}
aside {
	float:left;	
	width: 20em;
	height: 100%;
}
html, body { 
	height: 100%;
}

Voor de duidelijkheid: dit werkt perfect zoals ik het verwacht. Echter, er duiken problemen op als ik m'n formulier style. De bedoeling is om een formulier te maken waarbij de <p>'s een vaste breedte hebben en links van de input's komen te staan.
De CSS

Code:

#content form ul {
	list-style: none;
}
#content form li {
	padding: 0.5em;
	clear: both;
	overflow: hidden;
}
#content form li > label {
	float: left;
	width: 15em;
	text-align: right;
	margin-right: 1em;
	display: block;
	padding-top: 0.2em;
}

Nu, vanaf ik die 'clear: both' toepas, dan verspringt heel mijn layout en komt mijn #content div onder mijn aside (dus 100% lager), wat natuurlijk niet de bedoeling is...

Iemand die dit herkent, een idee heeft van wat er aan de hand is? Ik heb al flink wat afgezocht, maar vind enkel artikels die 2 column layouts maken gebaseerd op percentages. Links naar andere artikels zijn ook altijd welkom.

EDIT: ik heb ff een html online gezet met de html/css: http://bramme.net/sites/problem/

Dastardly · 6 feb 2011

in dat voorbeeld dat je online zet staan die inputs wel binnen uw paragraaf. is dat de bedoeling ? of ben je zaken aan het aanpassen ?

vanaf je die clear:both op niveau van uw li wegneem lijkt alles toch te werken zoals het moet in chrome (heb niet getest in ff of ie).

Bram · 6 feb 2011

Kan zijn dat er wat verschil was tussen code hier en online, de online code was het meest correcte.

Ik heb via twitter ondertussen de oplossing al gekregen:

Code:

#content form {
	display: inline-block;
	width: 100%;
}

en ik heb er voor de zekerheid

Code:

#content {
	padding: 1em;	
	display: inline-block;
	width: 100%;
}

van gemaakt, moest het probleem zich nog voordoen buiten forms.

Archief - 100% width layout met fixed aside

Bram

Legacy Member

Dastardly

Legacy Member

Bram

Legacy Member