[CSS] Element doesn't float right

Question

Hi everyone,

<div id="content">
    <h1>Contact</h1>
        <h2>Wanneer te bereiken?</h2>
            <p>U kan mij 7 dagen op 7 bereiken.</p>    
        <h2>Hoe te bereiken?</h2>
            <h3>Telefoon</h3>
                <p>+32(0)495842704</p>
            <h3>E-mail</h3>
        ...
</div>

I want the E-mail section to float right of the Telefoon section. How do I manage this? I already tried with assigning float:left to the Telefoon h3 element, but that did not work. Any kind of help is appreciated! Thanks!

Answer 1

You will want to enclose your Email section into a div and float that. Also I believe your Email section should come before telefoon and have a fixed width if you want to float it right.

Answer 2

Wrapping each block or "column" in an outer div would probably be the best way to achieve this.

For example:

<div style="float: left;">
    <h3>Telefoon</h3>
    <p>+32(0)495842704</p>
 </div>
 <div style="float: right;">
     <h3>E-mail</h3>
     <form action="mailer.php" method="post" onsubmit="MM_validateForm('E-mail','','RisEmail','Onderwerp','','R','Verificatie','','R','Bericht','','R');return document.MM_returnValue">
         <fieldset>
             <label>Uw e-mailadres:</label>
     <input name="E-mail" id="E-mail" value="" type="text">
     <label>Onderwerp:</label>
     <input name="Onderwerp" id="Onderwerp" value="" type="text">
     <label>Getal op afbeelding:</label>
     <input name="Verificatie" id="Verificatie" maxlength="4" type="text">
     <img src="verificationimage.php?3420" alt="verificatie-afbeelding" height="24" width="50">
     <label>Bericht:</label><textarea name="Bericht" cols="6" rows="5" id="Bericht"></textarea>
     <input name="Stuur bericht" id="submitbutton" value="Stuur bericht" type="submit">
        </fieldset>
    </form>
</div>

Answer 3

the float right element should be above the float left element

<div style="float: right;"> 
   </div> 
<div style="float: left;"> 
   </div> 

Answer 4

You should try to wrap the elements inside div and set the float attribute to the div. I recomend you to use BlueprintCSS. This framework help you with the layout of your Website.