[Opgelost] Layout meerdere content velden

[rayring]

Ik ben helaas geen CSS goeroe (probeer het wel te worden  ;D)

Ik wil meerdere contentvelden op mijn pagina dit lukt prima alleen het lukt niet om deze netjes in de volgorde te krijgen zoals ik het wil.
Ik heb al aparte divs aangemaakt per content veld maar de content velden blijven onder elkaar weer gegeven.
Moet ik iets met absolute position doen...
Kortom CSS technisch lukt het niet, kan iemand me op weg helpen... Ik wil het zo naast elkaar hebben  ???:

[wpbremer]

Zoiets:

div#content1{
  width: 600px;
  height: 600px;
  float: left;
}

div#content2{
  margin-left: 600px;
  height: 300px;
}

div#content3{
  margin-left: 600px;
  margin-top: 300px;
  height: 300px;
}

Ik heb het niet getest maar volgens mij moet het zo werken.

[TD__]

Ik zou het zo doen:

Code: Select all

#box1{
width:50%;
height:600px;
float:left;
border:1px solid black;
margin-right:10px;
}

#box2{
width:48%;
height:295px;
border:1px solid black;
float:left;
margin-bottom:10px;
}

#box3{
width:48%;
height:295px;
border:1px solid black;
float:left;
}

(Die waardes bij width moet je niet zoveel aantrekken, ik heb het even snel geprobeerd in een template die variabel van breedte is.)

En dan voeg je aan de div waar het in staat het volgende toe:

Code: Select all

overflow:hidden;

[rayring]

Ik ga het proberen en kom erop terug..

[rayring]

Ik snap hier echt weinig van...blijkt...

Het blijft onder elkaar staan en ik krijg het niet naast elkaar.

Er worden prima 3 contant velden weergegeven in de admin editor dus dat werkt goed alleen de layout ....  >:(

Ik doe het waarschijnlijk helemaal fout maar in de template staat dit:

Code: Select all

      {* Start Content Area *}


   <div id="box1">
         <h2>{title}</h2>
         {content} <br />

      <div id="box2">
         <h2>{title}</h2>
         {content block='content2'} <br />

       <div id="box3">
         <h2>{title}</h2>
         {content block='content3'} <br />

      <hr class="accessibility" />
      </div>
	  {* End Content Area *}

En in de stylesheet staat nu:

Code: Select all

div#box1 {
width:50%;
height:600px;
float:left;
border:1px solid black;
margin-right:10px;
overflow:hidden;
}

div#box2 {
width:48%;
height:295px;
border:1px solid black;
float:left;
margin-bottom:10px;
overflow:hidden;
}

div#box3 {
width:48%;
height:295px;
border:1px solid black;
float:left;
overflow:hidden;
}

[wpbremer]

Heb je de css van mij ook al geprobeerd?

[TD__]

box1 moet je wel afsluiten voor het begin van box2, nu zitten box2 en box3 bij box1 in.
En als het dan nog ondermekaar blijft, maak het dan wat smaller.

(En in die boxes moet geen overflow. Haal die ook eerst maar even weg, als je een stap verder bent dan kijken we wel verder waar we die dan weer instoppen)

[rayring]

Ja nou snap ik het ik had de div's niet afgesloten nu werkt het...
Ik ga er verder mee..

Bedankt TD__ en wpbremer natuurlijk ook