CODEWITHSUNDEEP
htmlcssresponsive-design
Johnny
Johnny

Reputation: 27

Difficulty aligning form elements to look correct and be responsive

I'm having difficulty aligning my form elements to look something like this:

enter image description here

Right now it looks like this:

enter image description here

Any idea how I can fix it, I've been trying with the CSS so far but nothing seems to be working. Furthermore, it doesn't seem to be responsive, when I scale down the browser window there is a lot of overflow. This is my code so far:

CSS

.bookings {
    background-color: #FFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}
.bookings h1 {
    font-size: 25px;
    text-align: center;
    color: #F3C;
}
::-webkit-input-placeholder {
 color: blue;
}
.bookingform input, .bookingform textarea, .bookingform select {
    border: 1px solid #000;
}
.bookingform {
    border: 1px solid #000;
    border-style: solid;
    padding: 1em;
    margin: 2em;
}
.bookingform textarea {
    width: 30%;
    height: 60%;
}
.option label {
    display: block;
    width: 20em;
    text-align: right;
    margin-right: 20em;
}
input#time {
    display: inline;
}
.bookingform input type=["checkbox"] {
 float:right;
}

Jsfiddle: http://jsfiddle.net/zqqb62j8/1/

Upvotes: 1

Views: 171

Answers (3)

PseudoAj
PseudoAj

Reputation: 5977

A very usual problem, I would recommend you to do it the hard way and keep only the necessary formatting as mentioned above but what I want to mention is you can do it quick by using some tools that allow you align elements using GUI,

Online Tools: You can align and see how it works using following tools that you can run in your browser:

-http://www.cssdesk.com/

-http://jsfiddle.net/

Softwares with WYSIWYG: WYSIWYG (/ˈwɪziwɪɡ/ WIZ-ee-wig) is an acronym for "What You See Is What You Get".

-Dreamweaver: One of the best tools for the web designing that I use. Tutorial on aligning elements using Dreamweaver: youtube.com/watch?v=eG5rkN80hSI

-Amaya: Built for windows/linix/mac

Further, although what you ask is very specific I just wanted to list out better way to do it. Hope it helps.

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

I changed the first part of your html and replaced the css. Check out the JSFiddle. I gave all labels, input and textareas a width so they end lined up nicely. Further I used basic floating and clearing to position everything.

.option{
    background-color: #DDD;
    margin: 5px;
    float: left;
    clear: left;
}
.option label{
    float: left;
    clear: left;
    width: 150px;
    margin: 10px;
}
.option input, .option textarea{
    width: 150px;
    max-width: 150px;
    float: left;
    margin: 10px;
}
h1{
    font-size: 20px;
    font-weight: bold;
    width: 300px;
    margin: 5px;
}

Upvotes: 0

Shomz
Shomz

Reputation: 37711

Reduced the width and the right margin of labels, and set them to inline-blocks. Also, removed inputs from them, they don't need to be label's children, but siblings: 

.option label {
    display: inline-block;
    width: 10em;
    text-align: right;
    margin-right: 2em;
}

See what it looks like for the first three elements: http://jsfiddle.net/zqqb62j8/2/

UPDATE

Here's a more simple/readable example, similar to what you wanted: http://jsfiddle.net/zqqb62j8/7/

Upvotes: 1

Related Questions