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阅读原文】。感谢您的支持!

您可能感兴趣的

IE7, CSS3, background images & scaling Ok, so here's my problem. For a client I'm using a lightbox (in this case slimbo...
Internet Explorer 8 and CSS3 How do you make your website CSS3 compatible with Internet Explorer versio...
Is that possible to design a div with css3 shadow ... I'm trying to have for my IE div's the same behavior than with other browsers. I...
Css3 incorrect column-count I'm trying to make responsive layout with columns but in some cases their count...
7个不容错过的jQuery图片动画及源码 jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人。本文...