Question

I have the following HTML5 page (in a Windows Store App):

<div>
    <textarea id="wideBox" class="wideInput"></textarea>        
    <textarea id="small1" class="narrowInput"></textarea>
    <textarea id="small2" readonly class="narrowInput"></textarea>
</div>

And the following CSS:

.wideBox {
    width: 100%;
    box-sizing: border-box;
    opacity: 80;
    height: 200px;
    background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}

.narrowInput {
    width: 50%;
    box-sizing: border-box;
    height: 200px;
    float: left;
    padding: 5px;
    background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}

The effect that I’m after is a single wide text box with two, equally sized smaller text areas beneath.

This does work, however, the smaller text boxes just merge together. To counteract this, I tried introducing a margin of 1px, however, this had the effect of pushing the second smaller text box to the next line.

I’ve also tried adding a border to the boxes, but to no avail.

How can I get the effect of a gap, or delineator, without changing the overall layout of the page?

Answer 1

You can simply wrap your second row textarea‘s into another div‘s which would have 50% and padding-right to emulate gap between textareas:

/* textareas are inside this .wrap and have 100% */
.wrap {
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.wrap-first {
    padding-right: 1px;
}

http://jsfiddle.net/dfsq/RHYSL/