[CSS] Width lijkt niet te werken?

[gast0231]

Eeey, ik had even een vraagje. Ik ben namelijk bezig met een nieuwe layout voor m'n website, en nou wil ik de grote gedeeltes tekst netjes in paragrafen laten weergeven. Ook moeten er twee kolommen naast elkaar komen te staan. Ik heb in css twee classes ingesteld voor een paragraaf links en een paragraaf rechts. Alleen wanneer ik de pagina bekijk komt er één hele lange regel met tekst. Zie hieronder mijn code:

CSS:

#main{
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
width: 950px;
}
p.left{
width: 700px;
color: #A0A0A0;
float: left;
}
p.right{
width: 200px;
float: right;
color: #A0A0A0;
}

HTML:

<div id="main">
  <p class="left">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
  <p class="right">TESTTESTTESTTESTTTESTTESTTESTTEST</p>
</div>

Zie ook deze afbeelding van mijn probleem:

Zoals jullie misschien wel zien doet het probleem zich op de afbeelding in Google Chrome thumb voor, maar ook in IE8 word het zo weergeven

Ik hoop dat ik bij deze duidelijk genoeg ben geweest en wacht met geduld op het antwoord. Alvast bedankt voor jullie hulp!

 

[Tha Devil]

Gebeurd het ook wanneer je eens wat spaties tussen je tekst zet?

Je kunt beter voor testdoeleinden Lorem Ipsum gebruiken, die zorgt voor een realistischer beeld aangezien je nooit zo'n lang woord zult gaan gebruiken omdat die niet bestaat.

 

[peter vazed]

      #main{
   
      margin-left: 15px;
   
      margin-top: 15px;
   
      margin-right: 15px;
  
      width: 950px;
border:solid 2px #000000;
  
      }
   
      p.left{
  
      width: 700px;
  
      color: #A0A0A0;
  
      float: left;
border:solid 2px #ff0000;
 
      }
 
      p.right{
 
      width: 200px;
 
      float: right;
  
      color: #A0A0A0;
  border:solid 2px #ff0000;      }

<div id="main">
 
      <p class="left">TESTTESTTESTTE<br>
STTESTTESTTESTTE<br>

STTEST<br>
TESTTEST</p>
 
      <p class="right">TESTTE<br>STTESTT<br>
ESTTTESTTES<br>TTESTTEST</p>
   
      </div>

zal beter zijn.
Jeveroorzaaktzelfdielangeregledoorgeenspatiesinjeteksttetikken,dusnooitmeerdoenalsjeitswiltestenpuntkommaennunaardevolgenderegelomtekijkenwatjenogmeermoetdoen
en voeg een gekleurde border toe als je met divjes werkt,
dan zie je wat er gebeurt.

 

[gast0231]

Eeey, hartstikke bedankt. Dat ik daar niet aan heb gedacht

 

[gast0231]

en voeg een gekleurde border toe als je met divjes werkt,
dan zie je wat er gebeurt.

:cool:[/QUOTE]

Waarom dat???

 

[Tha Devil]

Dat zorgt er voor dat je weet waar je div's/elementen zich bevinden.

Als je nou tekst buiten een rand ziet verschijnen kun je beter het probleem aanwijzen en oplossen

 

[gast0231]

Dat zorgt er voor dat je weet waar je div's/elementen zich bevinden.

Als je nou tekst buiten een rand ziet verschijnen kun je beter het probleem aanwijzen en oplossen

Ach, ja, het is nu opgelost, en ik heb niet vaak problemen, dus ik houd het denk ik maar zo. Nogmaals bedankt!