I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
Related
I want to set the width of a header realtive to conatiner width with taking into account header's margin
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
}
header{
width: 100%;
border: 1px solid green;
height: 20px;
margin: 10px;
}
<div class="container">
<header></header>
</div>
but header element gets out from the border of container on a few pixels on the right side.
Also tried to add box-sizing: border-box; to header's style, nothing happened. Why?
Set width: calc(100% - 22px);for header. That's 100% minus twice the border (2 * 1px) minus twice the margin (2*10px), adding up to 22px.
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
}
header{
width: calc(100% - 22px);
border: 1px solid green;
height: 20px;
margin: 10px;
}
<div class="container">
<header></header>
</div>
I sugest instead of using margins on child div - use padding:10px on parent div. I've updated your code snippet.
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
padding:10px;
}
header{
width: 100%;
border: 1px solid green;
height: 20px;
}
<div class="container">
<header></header>
</div>
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
This might be a trivial question, but as you can see in this fiddle I have an inner and an outer div. The outer div has a percentage width on the body and the inner div should be exactly as wide as the outer div.
<div id="container">
<div id="content">Content</div>
</div>
The problem is, the inner div width does not adapt to the padding of the outer div. How do I get the inner div to do this?
The purpose of this is, that the div should be part of a form which consists of input fields and select boxes which also have a percentage width and a padding. The div should now be exactly as wide as the other form elements with padding.
#container {
width:80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
padding: 0 10px;
margin-left:-10px;
margin-right:-10px;
}
<div id="container">
<div id="content">Content</div>
</div>
I removed left and right padding.
Try this
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px 10px 0px; //changed this
}
Demo here
Just change the padding on the container. Also, block level elements will go to 100% width unless you specify otherwise.
http://codepen.io/anon/pen/wKwoPJ
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px;
}
#content {
border: 1px solid blue;
}
Remove the left and right padding from the parent and add it to the child element. Using box-sizing with border-box will ensure that the 1px border of the child will stay inside the parent element.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
width:80%;
border: 1px solid red;
padding: 10px 0;
}
#content {
border: 1px solid blue;
padding: 0 10px;
width: 100%;
}
<div id="container">
<div id="content">
Content
</div>
</div>
you can add this css to the #content -
width: calc(100% + 20px);
margin-left: -10px;
Full Code -
#container {
width: 80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
width: calc(100% + 20px);
margin-left: -10px;
box-sizing: border-box;
}
#othercontent {
margin-top: 10px;
border: 1px solid green;
}
<div id="container">
<div id="content">
I'm not following the padding
</div>
<div id="othercontent">
I'm following..
</div>
</div>
Best way to demonstrate what I want is to show it:
I want the left and right div to expand to the left and right edge of the container div automatically.
It can be done with Javascript and with flex but I'm wondering is there is another way that supports IE9+ (flex is IE11+)
I created this live demo (click "Run with JS") with a dynamically changing center div (since the "real life" problem doesn't have a static size)
Using a display: table-cell would make it easy for you.
Demo: http://jsfiddle.net/abhitalks/VytTX/1/
HTML:
<div class="outer">
<div id="left" class="inner"></div>
<div id="center" class="inner">...</div>
<div id="right" class="inner"></div>
</div>
CSS:
body { width: 100%; }
div.outer {
width: 90%;
border: 1px solid gray;
background-color: rgb(12, 34, 43);
text-align: center;
display: table;
border-spacing: 10px;
}
div.inner {
border: 1px solid gray;
height: 200px;
display: table-cell;
min-width: 20px; width: 20px;
padding: 4px;
background-color: rgb(212, 234, 143);
}
You could achieve that like this :
An example: http://codepen.io/srekoble/pen/rugxh (change the variable of the center width $width)
It's a sass file for a variable usage:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.outer {
width: 100%;
border: 1px solid gray;
background-color: rgb(12,34,43);
text-align: center;
margin: 0 auto;
font-size: 0;
}
div.inner {
border: 1px solid gray;
height: 200px;
display:inline-block;
min-width: 20px;
}
$width: 50%;
#center {
width: $width;
background: red;
}
#left,
#right {
width: ( 100% - $width ) / 2;
background: yellow;
}
<style>
body
{
background: #0B222A;
}
.outer
{
width: 400px;
height: 300px;
background: #D3EA8F;
margin: auto;
}
.inner
{
width: 60%;
height: 300px;
background: #D3EA8F;
border-left: solid 10px #0B222A;
border-right: solid 10px #0B222A;
margin: auto;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>