Question

I am new to CSS but I am trying to create this layout:

I have tried to have a wack at this, and here is the code I have:

http://jsfiddle.net/cskQ8/

Now, I know this is basic, but what am I doing wrong?

P.s I want this to cope with a field of any height (i.e very tall)

Answer 1

Add .fieldwrapper{display:inline-block}

As div is block element, it is getting displayed in the next row so make it inline block then it flows in the same row.

Demo here

---

In simple form you can remove div around input and write like below

    <div class="r6 dc3 ts2 p4">
    <label field_id="None" for="sender">Sender email address</label>
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value="">
    </div>​

.lft { float: left; }
ul, li { list-style-type: none; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow:auto}
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }
label{float:left; padding-right:15px}

demo http://jsfiddle.net/cskQ8/11/