CMS Made Simple Forums

Posted: **Fri Jan 20, 2012 5:40 pm**

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:

Posted: **Fri Jan 20, 2012 5:49 pm**

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;
}

Posted: **Fri Jan 20, 2012 8:56 pm**

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.

Posted: **Fri Jan 20, 2012 10:58 pm**

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

Posted: **Sat Jan 21, 2012 7:32 am**

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;
}

CMS Made Simple Forums

[Opgelost] CSS uitlijning sidebar gaat fout

[Opgelost] CSS uitlijning sidebar gaat fout

Re: CSS uitlijning sidebar gaat fout

Re: CSS uitlijning sidebar gaat fout

Re: CSS uitlijning sidebar gaat fout

Re: CSS uitlijning sidebar gaat fout