login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div rechts floaten, andere centreren

Offline MoonShine - 09/04/2011 17:24
Avatar van MoonShineNieuw lid Hallo mensen,

Ik heb een content-gedeelte, en een sidebar. De sidebar zit constant tegen de rechterkant van de browser aan, met een vaste breedte. In de overige ruimte links, moet de content gecentreerd worden. De content zit in een div met een vaste breedte. Maar wat nu het probleem is, is dat met margin-left en -right op auto, de content gewoon achter de sidebar gaat. Die ruimte rekent de margin blijkbaar mee.

Maar ik wil dat het in de overige ruimte, dus 100% van de breedte, min de sidebar, gecentreerd wordt. Hoe kan ik dit het beste doen?

In de body heb ik dit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="container">
  2. 		<div class="content">
  3. 			<div class="intro">Tekst</div>
  4. 		</div>
  5. 		<div class="sidebar"></div>
  6. 		<div class="footer"></div>
  7. 	</div>

CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div.container {
  2. 	width: 100%;
  3. 	height: 100%;
  4. }
  5. div.content {
  6. 	width: 800px;
  7. 	margin-left: auto;
  8. 	margin-right: auto;
  9. }
  10. div.sidebar {
  11. 	position: absolute;
  12. 	top: 0px;
  13. 	right: 0px;
  14. 	width: 400px;
  15. 	height: 100%;
  16. }
  17. div.intro {
  18. 	position: relative;
  19. 	top: 50px;
  20. 	margin-left: auto;
  21. 	margin-right: auto;
  22. 	width: 690px;
  23. }

De div content mag dus maximaal de breedte hebben van de gehele breedte, min de sidebar. En de div intro moet daarin gecentreerd worden.

Heeft iemand enig idee?
Thanks.

2 antwoorden

Gesponsorde links
Offline chth - 09/04/2011 23:44 (laatste wijziging 09/04/2011 23:48)
Avatar van chth Lid ik heb dit even geprobeerd en heb het een beetje aangepast
in de html-code heb ik enkel iets omgewisseld en gebruik ik deze code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.     <div id="sidebar"></div>
  3. 	<div id="content">
  4.     <div id="intro">Tekst</div>
  5.     </div>
  6.     </div>


voor da css-code heb ik wat meer aanpassingen moeten doen, kheb er ook even borders rond gezet zodat je kan zien of dit is wat je wil bekomen, ik heb ook gezien dat ge met pixels en procenten werkt, probeer zoveel mogelijk met het ene ofwel met het andere te werken.
voor het maken van div's om de layout te bepalen mag je de class' best wel vervangen door id's.
ook vooraleer je ergens met height: 100% of width: 100%, wil werken moet je eerst html en de body op 100% instellen.
met volgende css-code bekom ik iets dat ik denk dat jij wil bekomen.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	height: 100%;
  5. 	width: 100%;
  6. }	
  7.  
  8. body {
  9. 		margin: 0;
  10. 		padding: 0;
  11. 		height: 100%;
  12. 		width: 100%;
  13. }
  14.  
  15. div#container {
  16. 				height: 100%;
  17. 				width: 1204px;
  18. 				margin: 0 auto 0 auto;
  19. 				border: 1px solid red;
  20. 				}
  21.  
  22.  
  23. div#sidebar	{
  24. 		width: 400px;
  25. 		border: 1px solid blue;
  26. 		float: left;
  27. 		height: 100%;
  28. 		}
  29.  
  30. div#content	{
  31. 			width: 800px;
  32. 			height: 100%;
  33. 			margin: 0 auto 0 auto;
  34. 			border: 1px solid black;
  35. 			float: left;
  36. 			}
  37.  
  38.  
  39.  
  40. div#intro {
  41. 		width: 690px;
  42. 		border: 1px solid green;
  43. 		margin: 50px auto 0 auto;
  44. 		}
Offline MoonShine - 15/04/2011 15:38
Avatar van MoonShine Nieuw lid Thanks voor de hulp. Ik heb echter nog steeds niet het gewenste resultaat (al ben ik al wel goed op weg). Het enige probleem is dat de inhoud van #content ook achter de sidebar gecentreerd word, en er niet naast blijft (en in de vrije ruimte gecentreerd wordt). Heeft iemand enig idee hoe ik dit kan oplossen?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.249s