[HTML - CSS] Doorlopen van lijn

[imp4ct]

Zit met een dom probleempje. Op zich denk ik dat het weer makkelijk op te lossen valt, maar ik kom er niet op.

Even uitleggen. Ik werk met een <div> layout, om het even makkelijk te schetsen.

HTML:

<div id="container">
  <div id="frm_left">
    <ul>
      <li>knop1</li>
      <li>knop2</li>
    </ul>
  </div>
  <div id="frm_right">
    <h1>een titel</h1>
    <p>wat tekst</p>
  </div>
  <div class="clear">
</div>

Goed, 't probleem is nu dat de frm_right een border-left heeft. Deze border wordt natuurlijk maar zo hoog gemaakt als dat er tekst staat. 't Probleem stelt zich dus dat frm_left veel langer is en dat mijn border van het rechtse frame niet doorloopt automatisch.

'k Hem de height attribuut van het rechtse frame al op 'auto' gezet of '100%' maar hij doet niets. En ik kan de lijn niet verplaatsen naar het linkse frame, want het kan dus perfect zijn dat mijn tekst langer is dan mijn knoppenreeks.

Hoe los je dit dan op ?

[crisp]

faux columns

[imp4ct]

crisp schreef op maandag 24 september 2007 @ 23:50:
faux columns

Even kijken

[imp4ct]

Werkt perfect!

Bedankt! (sluiten maar )

[RobIII]

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

[imp4ct]

De oplossing:

HTML:

<div id="container">
  <img src="mijnheader.gif" width="123" height="456" alt="foo" title="bar">
  <div id="frm">
    <div id="frm_left">
      <ul>
        <li>knop1</li>
        <li>knop2</li>
      </ul>
    </div>
    <div id="frm_right">
      <h1>een titel</h1>
      <p>wat tekst</p>
    </div>
    <div class="clear"></div>
  </div>
</div>

Cascading Stylesheet:

#frm {
 width: 700px;
 margin: 18px 0px 15px 0px;
 padding: 0px;
 border: 0px;
 color: #353535;
 background-color: #FFF;
 background-image: url(/images/line.gif) ;
 background-repeat: repeat-y;
}

.clear {
 clear: both;
 padding: 0px;
 margin: 0px;
}

[ Voor 5% gewijzigd door imp4ct op 25-09-2007 01:20 ]