CSS3 textarea layout using margins

综合编程 2018-07-16 阅读原文

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

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?

Problem courtesy of: pm_2

Solution

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/

Solution courtesy of: dfsq

Discussion

Width % sadly does not work as expected. It is calculated as a % of the parent width and does not take margin and padding into account. If the parent is 100px wide and you set 50% width, it will be the same as setting 50px width. Now add padding 5px to this and you got a total 55px width which will push down one of the boxes. It is with my knowledge impossible to combine width % and margin/padding to make pixel perfect scaling without javascript. The best I can think of is this setting a slightly lower width, 49.5% instead of 50% and floating the textboxes left and right to keep the symmetry.

The textboxes will scale with parent size, but the distance between the two boxes will also scale because that 0.5% will be larger if the parent is larger.

.wideBox { width: 100%; box-sizing: border-box; opacity: 80; height: 200px; background: -ms-linear-gradient(top, #213A4F, #1a82f7); } .narrowInput { width: 49.5%; /* Note lower width */ box-sizing: border-box; height: 200px; padding: 5px; background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7); } /* Float to keep symmetric layout */ .left { float: left; } .right { float: right; } /* clear after float */ .clear { clear: both; }

Discussion courtesy of: Rasmus Franke

I'm not sure if I've got your question correctly;

by the way, can you use CSS3
Calc ?

Demo: http://jsfiddle.net/4uc3N/

HTML

CSS

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

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

Discussion courtesy of: Andrea Ligios

This recipe can be found in it's original form on Stack Over Flow
.

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

CSS – CSS3 pixelate dot background Is it possible or is there a trick to make a background pixelated like the one in the image attached? I use a ...
CSS3 curved cutout from div? Is there a way to create a cutout in a div with CSS3 like in the example below? What I'm trying to do is creat...
animating elements sequentially in pure css3 on lo... I'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is...
CSS3 FlexBox Doesn't Display Correctly In Fir... For some reason a project I'm working on in Firefox 22 won't display correctly. In works fine in webkit browsers (tested...
Styling a form with css3 Basically I want to create a form which will have all the text in one "column" and all the input fields in another, so i...