0

I'm having issues aligning form elements the way I want using CSS.

This is what I need:

Name: Surname:

Email: Contact number:

Comment:

What I get is them all underneath each other like:

Name:

Surname:

Email:

Contact number:

Comment:

I've seperated the Name and Email elements into a div, the Surname and Contact number into a div, and the comment into a div. No amount of floating or clearing or positioning will move them into the way I want.

Here's my html:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>only.furniture</title>
<link href="Implement files/CSS/imdsite.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('Implement files/Images/products_rollover.png','Implement files/Images/about_rollover.png','Implement files/Images/location_rollover.png','Implement files/Images/home_rollover.png','Implement      files/Images/location_rollover.png')">

<div id="container">

        <div id="header">
            <div id="logo"> 
                <a href="home.html">
                <img src="Implement files/Images/logo.png" />
                </a>
            </div><!--HEADER CLOSING DIV-->

            <div id="navigation">
              <div id="home">
              <a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Implement files/Images/home_rollover.png',1)"><img src="Implement files/Images/home.png" name="home" width="169" height="58" border="0" id="home2" /></a></div><!--HOME CLOSING DIV-->

              <div id="about">
              <a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Implement files/Images/about_rollover.png',1)"><img src="Implement files/Images/about.png" width="158" height="57" id="Image11" /></a>          
              </div><!--ABOUT CLOSING DIV-->

              <div id="products">
                    <a href="products.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','Implement files/Images/products_rollover.png',1)"><img src="Implement files/Images/products.png" width="153" height="57" id="Image12" /></a>
                    <map name="Map" id="Map">
                      <area shape="rect" coords="36,20,113,45" href="products.html" alt="products" />
                </map>                  
              </div><!--PRODUCTS CLOSING DIV-->

              <div id="location">
                    <a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Implement      files/Images/location_rollover.png',1)"><img src="Implement files/Images/location.png" name="Image21" width="152" height="57" border="0" id="Image21" /></a>
              </div><!--LOCATION CLOSING DIV-->

              <div id="contact">
                <img src="Implement files/Images/contact_rollover.png" />
            </div><!--CONTACT CLOSING DIV-->
        </div><!--HEADER CLOSING DIV-->

        <div id="banner">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="195">
              <param name="movie" value="Implement files/Media/banner.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="11.0.0.0" />
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="Implement files/Media/banner.swf" width="970" height="195">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="11.0.0.0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div>
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
              </div>
                <!--[if !IE]>-->
            </object>
              <!--<![endif]-->
          </object>
        </div><!--BANNER CLOSING DIV-->

        <div id="contact_tagline">
            <h4>Contact us to book an appointment to view our catalogue and collections.</h4>
        </div> <!--TAGLINE CLOSING DIV-->

  <div id="contact_second">

    <div id="contact_block1">
        <h3>Please note that our complete range and collection will not be viewable, as many of our designs are still design
        concepts. Sample <br />colours can be shown as well as examples and photos of our work.
        <p>Phone: 011-453-7530<br />
        E-Mail: <a href="#">[email protected]</a><br />
      </p></h3>
    </div><!--CONTACT_BLOCK1 CLOSING DIV-->

    <div id="contact_block2">
        <div id="contact_block2_image">
            <img src="Implement files/Images/contact_image.jpg" />
        </div><!--CONTACT_BLOCK2_IMAGE CLOSING DIV-->

        <div id="contact_block2_text">
            <h4>Questions or Queries?</h4> <h3>If you have any questions, queries, complaints or suggestions,
            give us a call, email us or fill in your details below and we’ll get 
            back to you as soon as we can.</h3>
        </div><!--CONTACT_BLOCK2_TEXT CLOSING DIV-->

       <div id="about_form">
        <div id="about_form_left">
         <form action="index.php">
              <h5> Name:<Br />
            <input type="text" name="your_name" /> 
            </h5>

          <h5> Email:<Br />
            <input type="text" name="your_name" /> 
            </h5>

            <div id="about_form_right">
            <h5> Surname:<Br />
            <input type="text" name="your_name" /> 
            </h5>

            <h5> Contact number:<Br />
            <input type="text" name="your_name" /> 
            </h5>
            </div><!--ABOUT_FORM_RIGHT CLOSING DIV-->

            <div id="about_form_comment">
             <h5> Comment:<Br />
              <textarea rows="5" cols="50"></textarea>
             </h5>

             <h5>
             <input type="submit" value="Submit" name="submit">
             </h5>
          </div><!--ABOUT_FORM_COMMENT CLOSING DIV-->



            </form>
       </div><!--ABOUT_FORM CLOSING DIV-->
    </div> <!--CONTACT_BLOCK2 CLOSING DIV-->
  </div><!--CONTACT_SECOND CLOSING DIV-->



        <div id="footer">
            <img src="Implement files/Images/footer.jpg" border="0" usemap="#Map5" />
            <map name="Map5" id="Map5">
              <area shape="rect" coords="8,17,41,50" href="www.facebook.com/only_furniture" alt="facebook" />
              <area shape="rect" coords="45,17,78,50" href="www.twitter.com/only_furniture" alt="twitter" />
              <area shape="rect" coords="623,23,662,42" href="home.html" alt="home" />
              <area shape="rect" coords="683,25,724,41" href="about.html" alt="about" />
              <area shape="rect" coords="746,26,800,40" href="products.html" alt="products" />
              <area shape="rect" coords="827,25,881,41" href="location.html" />
<area shape="rect" coords="82,17,115,50" href="feed.onlyfurniture.com" alt="rss" />
            <area shape="rect" coords="911,25,958,42" href="contact.html" alt="contact" />
          </map>
    </div><!--FOOTER CLOSING DIV-->
</div><!--CONTAINER CLOSING DIV-->


<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

And here's my CSS:

#container {
    background-color: #FFF;
    height: 1060px;
    width: 990px;
    margin: auto;
}
#header {
    background-color: #FFF;
    height: 57px;
    width: 990px;
}
#logo {
    background-color: #FFF;
    height: 57px;
    width: 185px;
    margin-left: 10px;
    float: left;
}
#banner {
    height: 195px;
    width: 970px;
    margin-right: 10px;
    margin-left: 10px;
    clear: both;
}
#location {
    float: left;
    height: 57px;
    width: 153px;
    clear: none;
}
#contact {
    float: left;
    height: 57px;
    width: 155px;
    margin-right: auto;
    clear: none;
}


#tagline {
    width: 970px;
    height: 90px;
    margin-right: 10px;
    margin-left: 15px;
    margin-top: auto;
}


#second {
    height: 504px;
    width: 779px;
    margin-right: 107px;
    margin-left: 107px;
    clear: none;
    border: thin solid #0fb5b1;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #0fb5b1;
    text-decoration: none;
    font-weight: normal;
    margin-left: 125px;
    margin-top: 40px;
    margin-right: 125px;
    letter-spacing: 1.2px;
    text-align: left;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-decoration: none;
    color: #666666;
    margin-top: 63px;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: none;
}
h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
}
#footer {
    height: 63px;
    width: 970px;
    margin-top: 47px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 12px;
    border: thin solid #0fb5b1;
    clear: both;
    float: left;
}

#block1 {
    float: left;
    height: 504px;
    width: 393px;
}
#ruet_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: 190px;
    margin-right: 10px;
    float: left;
    text-align: center;
    padding-top: 10px;
}
#cubes_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: 180px;
    float: right;
    text-align: center;
    padding-top: 6px;
}

#second a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}

#second a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}

#second a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#block1_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: auto;
    text-align: center;
    padding-top: 10px;
}


#block2_image {
    height: 255px;
    width: 200px;
    float: left;
}


#block2 {
    float: right;
    height: 504px;
    width: 380px;
    clear: none;
}

#block2_text {
    float: right;
    height: 250px;
    width: 380px;
}
#home {
    float: left;
    height: 57px;
    width: 171px;
}
#about {
    float: left;
    height: 57px;
    width: 158px;
}
#products {
    float: left;
    height: 57px;
    width: 153px;
}
#text {
    height: 284px;
    width: 361px;
}
#chair {
    float: left;
    height: 221px;
    width: 152px;
}
#cubes {
    float: right;
    height: 221px;
    width: 209px;
}
#block2_chair {
    float: left;
    height: 146px;
    width: 188px;
    margin-left: 5px;
}
#block2_cubes {
    float: right;
    height: 146px;
    width: 180px;
}
#about_tag {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: none;
    float: none;
    text-align: center;
    padding-bottom: 20px;
    margin-left: 150px;
    width: 700px;
    height: 50px;
}
#about_second {
    border: thin solid #0fb5b1;
    height: 560px;
    width: 928px;
    margin-left: 30px;
    float: none;
    margin-right: auto;
}
#about_block1 {
    height: 520px;
    width: 440px;
    float: left;
    clear: both;
}

#about_block1_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: auto;
    padding-left: 48px;
    padding-top: 5px;
}
#about_block2 {
    height: 550px;
    width: 500px;
    float: right;
    margin-left: 30px;
}
#about_block2_image {
    float: left;
    height: 255px;
    width: 475px;
}
#about_block2_text {
    float: left;
    height: auto;
    width: 440px;
    clear: both;
    margin-top: 10px;
    margin-left: 47px;
}
#contact_tagline {
    text-align: center;
}
#contact_second {
    border: thin solid #0fb5b1;
    height: 550px;
    width: 965px;
    margin-left: 14px;
    float: left;
    margin-right: auto;
    clear: both;
}

#contact_block1 {
    height: 114px;
    width: 948px;
    float: left;
    clear: both;
    padding-left: 30px;
}


#contact_block1 a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#contact_block1 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#contact_block1 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}
#contact_block2 {
    float: left;
    height: 420px;
    width: 950px;
    clear: none;
}
#contact_block2_image {
    float: left;
    height: 374px;
    width: 500px;
    padding-top: 35px;
    clear: none;
}

#contact_block2_text {
    height: 125px;
    width: 415px;
    clear: none;
    float: right;
}
#about_form {
    height: 280px;
    width: 400px;
    float: right;
    clear: none;
}
#about_form_left {
    height: 120px;
    width: 150px;
    float: left;
    position: relative;
    padding-top: 35px;
}
#about_form_right {
    float: right;
    height: 150px;
    width: 150px;
    clear: right;
}



#about_form_comment {
    height: 201px;
    width: 415px;
}

I've managed to get them to appear underneath each other, which wasn't happening before. But I can't seem to get them to be the way I need them to be.

Can anybody help me out?

Improve this question
1
  • 7
    You surely don't think that you need to paste ~390 lines of CSS here to describe an issue with a tiny form. Only keep the relevant CSS/HTML. Otherwise, you might want to take a look at Codereview. Commented Sep 4, 2012 at 20:16

2 Answers 2

Reset to default
2

Currently you have:

 <h5> Name:<Br />
            <input type="text" name="your_name" /> 
            </h5>

Remove the <br/> to get:

 <h5> Name:
                <input type="text" name="your_name" /> 
                </h5>

Works just fine:

http://jsfiddle.net/VSRSE/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Rearranging the divs and styling 

h5
{
     display: inline-block
}

should work fine, although you'll also have to increase the width of the divs that you have them in, because right now they restrict the width to a single column. They can't both fit.

UPDATED DEMO (with removed width): http://jsfiddle.net/wFKQT/2/

Improve this answer

1 Comment

as an aside, explicitly setting the width and height of every single element on the page using ids is very very brittle and hard to maintain. Look into using classes rather than ids

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.