Element alignment with CSS - html

Question

I'm newbie with HTML and CSS. I'm struggling with (horizontal) element alignement and I would appreciate any help provided.
This is what I got so far:
http://jsfiddle.net/vayacondios2015/umpk0xht/
HTML
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
<label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
<input type="submit" value="Send"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
CSS in a link jsfiddle above (couldn't attach it properly).
This is how I would like it to be:
http://i.stack.imgur.com/VCWcL.jpg + centered on the page.
I'm looking forward for HTML semantic correction also, if you have some extra time and will.

Answer 1

Try these css. I will help you check this link https://jsfiddle.net/35sgma83/
.middle {
text-align: center;
}
div.mainbody {
text-align: center;
}

Answer 2

I would highly recommend getting to grips with HTML and CSS. I won't add specific links as there are thousands upon thousands of excellent resources all over the web.
However to help you I have modified the HTML so it's a little more structured:
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea" class="form-label">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea>
<span class="note"><strong>Note</strong>: You can only use <strong>this</strong> word in textarea!</span><br>
<input type="submit" value="Send" class="submit"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
You'll notice that the text area has a class, the note that appears under it also has been put into a span. I felt it better to use the <strong> tag when highlighting the bold text. You could go one step further and add a class in your CSS just for bold text. That will allow for re-usability.
I altered the CSS so that the container div which has .mainbody has the text aligned in the center. The rest of the changes are:
div.mainbody
{
text-align: center;
}
div.mainbody h2{
text-transform: uppercase;
text-align: center;
}
div div.right{
text-align: right;
float: right;
}
div div.left form label{
text-align: left;
}
.form-label, .note
{
float: left;
}
textarea {
width: 100%;
}
.submit {
clear: both;
display: block;
}
I think that satisfies your picture. Check out the fiddle here: http://jsfiddle.net/phyjauhc/1/

Answer 3

HTML semantic correction
Can be done via the w3c Markup Validation Service

Answer 4

Add below css
div.middle {
text-align: center;
}
div.ft_body {
text-align: center;
}
And change bottom div class name to ft_body and update cols="80" to cols="100%" for textarea