[HTML/CSS] Tweede float left probleem *

[We Are Borg]

Ik wil graag een bepaalde situatie creeeren en hiervoor gebruik ik elementen met een float via css. Om even te illustreren wat ik graag wil bereiken:

Gewenste situatie
[img]http:///www.planet.nl/~terps407/web.GIF[/]

Hieronder het stukje relevante code. Ik heb de UL, zie plaatje voor de uiteindelijke plaats, er even voor het gemak eruit gelaten, aangezien ik eerste de 2^de h2 wil goed krijgen

HTML gedeelte

HTML:

<div id="wrapperbottom">
<h2 id="quicksearch"><a href=""><span>Snel zoeken</span></a></h2>
<fieldset id="quicksearch">
<form id="quickform">
<label for="iam">Ik ben een </label>
<select id="iam" name="iam">
<option></option>
<option></option>
</select>
</form>
</fieldset>
<h2 id="works"><a href=""><span>Hoe werkt het?</span></a></h2>
</div>

Het volgende stukje CSS (gestript van background-colors en andere zaken die niet intressant zijn):

CSS gedeelte

Cascading Stylesheet:

div#wrapperbottom {
    width: 750px;
    height: 200px;
}
h2#quicksearch {
    margin: 0px;
    padding: 0px;
    width: 285px;
}
h2#quicksearch a {
    display: block:
    text-decoration: none;
}
h2#quicksearch a span {
    display: block;
    height: auto;
    width: 285px;
}
fieldset#quicksearch {
    width: 285px;
    height: 183px;
    margin: 0px;
    padding: 0px;
}
fieldset#quicksearch form#quickform {
    position: absolute;
    margin-top: 10px;
}
fieldset#quicksearch label {
    display: block;
    float: left;
    width: 80px;
    margin-left: 20px;
    padding: 4px;
}
fieldset#quicksearch select {
    display: block;
    width: 140px;
    height: 18px;
    margin-left: 120px;
}
fieldset#quicksearch label#submit {
    visibility: hidden;
}
input#search {
    margin-top: 10px;
    margin-left: 67px;
    width: 85px;
}
h2#works {
    margin: 0px;
    padding: 0px;
    width: 220px;

}
h2#works a {
    display: block;
}
h2#works a span {
    display: block;
    height: auto;
    width: 220px;
}

Het probleem
Het probleem is dus dat ik de h2 met id 'works' niet goed gefloat krijg. Ik krijg de h2 works alleen maar links of helemaal rechts _onder_ het form, terwijl het dus rechts van de eerste h2 zou moeten zijn. Wat ik ook doe met het floaten, ik krijg het niet op de manier waarop ik het graag zou willen.

Aangezien ik vrij nieuw ben met het float gedeelte, heb ik eerst wat tutorials opgezocht toen ik dit probleem tegen kwam. Op zich zou een float left op de h2 moeten werken als ik het goed heb begrepen (blijkbaar niet, anders zou het wel werken ), maar dan moet er wel ruimte voor zijn. Kortom, heb even overal een border omheen gezet om te kijken, maar die ruimte zou er moeten zijn.
Iemand die me een duw de juiste richting op kan geven ?

[ Voor 16% gewijzigd door We Are Borg op 28-03-2005 00:45 ]

[crisp]

De h2 hoort ogenschijnlijk bij je formulier (overigens zou ik de fieldset binnen het formulier zetten ipv daarbuiten), dus waarom zet je daar geen element omheen om die te groeperen?
Je markup zou dan zoiets zijn:

code:

<div id="wrapperbottom">
  <div id="quicksearch">
    <h2>quicksearch</h2>
    <form id="quicksearch">
      <fieldset>
        <legend>quicksearch</legend>
        <!-- form elementen -->
      </fieldset>
    </form>
  </div>
  <div id="works">
    <h2>works</h2>
    <ul id="works">
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

lijkt me logisch toch? en bovendien makkelijker te postioneren

[Verwijderd]

Als ik even snel kijk naar je "works"-html, ga ik er vanuit dat je iets hebt waarvan je een opsomming gaat geven hoe het werkt. In dat geval zou ik persoonlijk voor een Definition List kiezen.

HTML:

  <dl id="works">
    <dt>works
    <dd>item
    <dd>item
  </dl>

Daar hoef je dan geen div meer omheen te gooien.

Bij mijn weten, *moet* een fieldset zelfs binnen een form. Waarom niet een legend gebruiken binnen de fieldset? legend is juist bedoeld als caption voor een fieldset. Die span is me niet helemaal duidelijk, daarom heb ik hem maar weggehaald.

HTML:

<form id="quickform">
  <fieldset id="quicksearch">
    <legend><a href="">Snel zoeken</a></legend>
    <label for="iam">Ik ben een </label>
    <select id="iam" name="iam">
      <option>item
      <option>item
    </select>
  </fieldset>
</form>
<dl id="works">
  <dt>works
  <dd>item
  <dd>item
</dl>

Vervolgens je form left floaten en je definition list rechts floaten. Of doe het absoluut... Whatever floats your boat.

P.S. Let je er ook op dat een id attribuut uniek moet zijn?

[ Voor 50% gewijzigd door Verwijderd op 28-03-2005 12:42 ]

[We Are Borg]

crisp schreef op maandag 28 maart 2005 @ 01:00:
De h2 hoort ogenschijnlijk bij je formulier (overigens zou ik de fieldset binnen het formulier zetten ipv daarbuiten), dus waarom zet je daar geen element omheen om die te groeperen?
Je markup zou dan zoiets zijn:

code:

<div id="wrapperbottom">
  <div id="quicksearch">
    <h2>quicksearch</h2>
    <form id="quicksearch">
      <fieldset>
        <legend>quicksearch</legend>
        <!-- form elementen -->
      </fieldset>
    </form>
  </div>
  <div id="works">
    <h2>works</h2>
    <ul id="works">
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

lijkt me logisch toch? en bovendien makkelijker te postioneren

Heb je gelijk in. Heb wat veranderen doorgevoerd naar aanleiding van je reactie, en het is nog niet perfect, maar ik zal er zeker nog naar kijken

Verwijderd schreef op maandag 28 maart 2005 @ 12:40:
Als ik even snel kijk naar je "works"-html, ga ik er vanuit dat je iets hebt waarvan je een opsomming gaat geven hoe het werkt. In dat geval zou ik persoonlijk voor een Definition List kiezen.

HTML:

  <dl id="works">
    <dt>works
    <dd>item
    <dd>item
  </dl>

Daar hoef je dan geen div meer omheen te gooien.

Heb je goed geraden. Zal eens kijken naar de definition list

P.S. Let je er ook op dat een id attribuut uniek moet zijn?

Klopt, maar ik was zo aan het rotsooien om de positie goed te krijgen dat het een beetje een zooitje is geworden. Nadat ik de positionering goed heb gekregen, ga ik eens kijken naar wat hier is gezegd en het verbeteren.

Aangezien jullie beiden zeggen dat het kan, doe ik toch nog iets fout . Ik heb het even online gegooid voor het gemak, nadat ik het enorm heb gestript (maar het probleem nog steeds duidelijk is). Het is nog een beetje een zooitje qua semantiek, maar ik neem jullie dingen allemaal mee zodra ik de positie van de div 'works' goed heb gekregen . Ik heb dus de markup veranderd (nog niet helemaal perfect), maar krijg de div works niet goed gefloat. Dus naast de eerste div quicksearch

http://home.planet.nl/~terps407/got/index.html

[ Voor 12% gewijzigd door We Are Borg op 28-03-2005 13:21 ]

[T-MOB]

Om ze naast elkaar te krijgen zul je beide <DIV>'s moeten floaten... Met de HTML van crisp:

Cascading Stylesheet:

div#quicksearch { float: left; margin-right: 10px; }
div#works { float: left; }
/* de div voor het #-teken is niet nodig als je unieke id's gebruikt enzo... */

[ Voor 6% gewijzigd door T-MOB op 28-03-2005 14:10 ]

[Zoefff]

Ik zou het oplossen door er 2 kolommen van te maken, en die eventueel nog in een 3e div om de boel helemaal gecentreerd te krijgen.

Dus bijvoorbeeld zoiets:

HTML:

<div id='container'>
    <div id='links'>
        <h2>Quicksearch</h2>
        <p>Formulierblaat</p>
    </div>
    <div id='rechts'>
        <h2>Works</h2>
        <p>UL enzo</p>
    </div>
</div>

Cascading Stylesheet:

div {
    border:1px solid red;
    padding:1px;
}
#container {
    width:600px;
    margin:10px auto 0px auto;
}
#links {
    width:300px;
    height:400px;
    float:left;
}
#rechts {
    height:400px;
    margin-left:300px;
}

Voorbeeldje: http://zoefff.gotdns.com/got/twee_kolommen.htm

[Pelle]

Titelfix

[We Are Borg]

Pelle schreef op maandag 28 maart 2005 @ 14:51:
Titelfix

Bedankt voor het voorbeeld. Kreeg het nog niet voor elkaar totdat ik de container een height mee gaf en toen viel alles gelijk op zijn plaats