Having trouble aligning divs


#1

I am getting to grips with margins, floating, divs etc.

I can't work out how to get my left div and the contact form to be next to each other while keeping the contact form central!
Help?? Here is the code which results in both bits being next to each other but the form not central.

HTML:

<!-- Contact Form !--> 
<div id="contact">
<h2>Send me an email!</h2>

<form action="MAILTO:lina@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</div>

<!--side picture/div !-->

<div id="leftBanner"> 
    <ul>
        <li> Word1 </li>
        <li> Other Words </li>
        <li> <a href="twitter.com">Twitter </li>
    </ul>
</div>

#contact {
    display: inline-block;
    text-align: center;
    margin:auto;
    text-align: center;
    color: #ff6768; 
}


#leftBanner {
    display: inline-block;
    float: left;
    background-color: #993d3e;
}

#2

Since both objects are DIV's, they are already blocks and don't need the above display property. In the markup, the leftBanner should appear before the form in source listing. Give them both a float: left property and adjust margins to suit. Be sure to give both DIV's a width property.


#3

Thankyou, I've done what you have said and it is certainly neater. However I now have two divs on the left. Is there a way to make the form central on the page?


#4

https://www.codecademy.com/pyRunner48861/codebits/6vLJ69


#5

The contact div can have an automatic width so it spans the full remaining width. We don't need to specify this property. The form element is a block that we can set a width on. It looks like somewhere between 300 and 400 pixels in natural width, so let's go with that:

form {
    width: 400px;
    margin: 0 auto;
    text-align: left;
}

Since the DIV is center aligned, the form will be centered. We should left justify the form controls for best practice.

The above didn't work as hoped. With some tweaking I got the form to position correctly.

#contact {
    /*float:left;*/
    width: auto;
    text-align: center;
    color: #ff6768; 
}

form {
    width: 300px;
    margin: 0 auto;
    text-align: left;
}

I also moved the H2 to just inside the form element to marry it to the form.

<form ....>
<h2>Send me an email!</h2>

#6

Brilliant! Thank you so much. It would look neater if the form spaces "your name" etc were also centralized, is there a way to do this?


#7

Contrary to what we might think, form controls should not be written as centered elements. This is an accessibility and readability concern. Left justify is the norm. Don't go for pretty. Go for practical. Think always of the end user.