[Opgelost] CSS uitlijning sidebar gaat fout

[erpee]

Ik heb een redelijk basic ontwerp gemaakt.

Er moest aan de rechterkant nog een sidebar bij, dat heb ik gedaan, maten opgegeven etc.

Zie CSS:

Code: Select all

div#main {
   margin-left: 26%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 26%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 24%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

div#r-sidebar {
   float: right;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 24%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

Sidebar aangeroepen met:

Code: Select all

      {* Start Social Media *}
      <div id="r-sidebar">
		<h2>Social Media</h2>
      </div>
      {* End Social Media*}	  

Maar nou staat het helemaal onderaan (kop "Social Media", Zie afbeelding). Dat moet niet! Wat moet er anders?

Zie afbeelding:

[timdebuurman]

Hoi Erpee,

De main-div moet nu ook float:left krijgen, omdat deze links van de rechter sidebar moet komen.

Dan zou je ook nog width: 50%;
bij de main-div kunnen zetten in plaats van de marges.

Styles komen er dan zo uit te zien:

div#main {
float: left;
width: 50%;
}

div#sidebar {
float: left;
width: 24%;
display: inline;
margin-left: 0;
}

div#r-sidebar {
float: right;
width: 24%;
display: inline;
margin-left: 0;
}

[mcDavid]

Juist géén float:right meegeven aan de rechterdiv, dan blijft 'ie eronder staan.

Je moet gewoon alle divs die naast elkaar moeten komen naar links floaten, en er rekening mee houden dat ze qua breedte naast elkaar passen, inclusief de borders en margins enz.

[Rolf]

Controleer eens in het sjabloon de volgorde van de zijbalken en de maincontent...
Denk dat het links, rechts en dan main moet zijn.
Grt. Rolf

[erpee]

Ik heb alles geprobeerd en de volgende code bleek het toch het best te doen:

Code: Select all

div#main {
	float: left;
	width: 50%;
	margin-left: 5px;
}

div#sidebar {
	float: left;
	width: 24%;
	display: inline;
	margin-left: 0;
}

div#r-sidebar {
	float: right;
	width: 24%;
	display: inline;
	margin-left: 0;
}