I feel like this is something that's really simple to fix, but I'm just too dumb to figure it out, but I've been Googling for a long time to figure this out. The textbox on the bottom of my page is getting cut off for some reason. I think it has to do with how the body div is set up. Also, if someone could tell me how to get my textarea the same size as the main div, that'd really be nice. JSFiddle
HTML
<div id="body">
<div id="main">
<h1>Test</h1>
<hr />
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>
CSS
#main {
background-color:white;
position:relative;
min-height:300px;
padding: 20px 20px 20px 20px;
border-left: 1px grey solid;
border-right: 1px grey solid;
border-bottom: 1px grey solid;
}
#main p {
font-size:20px;
word-wrap:break-word;
}
#header {
background-color: #C0C0C0;
width: 100%;
border-bottom: 1px solid grey;
}
html, body{
height: 100%;
}
#body {
margin-left:75px;
margin-right:75px;
margin-bottom:125px;
margin-top:0;
}
#controls {
position: absolute;
display: inline-block;
width:90%;
height: 100px;
overflow: hidden;
z-index: 0;
} #controls form textarea {
resize: false;
width: 100%;
height: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}
I just removed this one property from the CSS tab
#controls {
overflow: hidden;
}
and it worked! You can see the full textarea now.
Here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/
DEMO
#controls {
position: absolute;
display: inline-block;
width:90%;
height: 100px;
//removed 'overflow:hidden' property
z-index: 0;
}
Related
In this example, which I'm trying to understand, definitely overflow happens, but it doesn't work. why?
body, html, p {
margin: 0;
padding: 0;
}
html{
background-color: #666;
}
body{
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div{
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p{
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
HTML: Inside Body Tag
Emmet: div>p>lorem10
Body should always cover 100% of the width. I would suggest you set a inner wrapper instead that you use overflow hidden on.
https://jsfiddle.net/jjxurtpk/
html
<div class="wrapper">
<div>
test
</div>
</div>
css
.wrapper{
width:400px;
overflow:hidden;
background:#eee;
padding:20px;
}
.wrapper div{
width:500px;
background:#ddd;
padding:10px;
}
update: https://jsfiddle.net/jjxurtpk/1/
I believe the overflow hidden does not fully apply unless the background (html) does not have overflow hidden. I'm not sure why. It could just be thats how browsers simply render the body tag.
See this fiddle
You will have to add overflow:hidden to html too ..
See the below CSS
body,
html,
p {
margin: 0;
padding: 0;
}
html {
background-color: #666;
overflow:hidden; /* <---------------add this----------*/
}
body {
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div {
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p {
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
You need to set a height on the body, and apply overflow: hidden to the html.
See demo here
html{
overflow: hidden;
}
body{
height: auto;
}
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
I've got the following code:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
I thought, when I give a hardcoded height to my wrapper div (in the example 25px) and then height: 100%; to his child-elements, they would flex correctly and have the same height.
But in my snippet, my input is higher than my div.
If I remove the height from the wrapper div and give the input a height 23px and to the child-div 25px, it works. But I would like to set it a little bit dynamically.
It should look like this:
How can I do this?
Thanks and cheers.
The problem is default padding of input element so you can just add box-sizing: border-box and keep padding inside height of element.
.wrapper {
display: flex;
height: 25px;
}
.wrapper * {
box-sizing: border-box;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
The input element has default styling from the browser:
Make the following adjustments:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
box-sizing: border-box; /* NEW; padding and border now absorbed into height:100% */
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
box-sizing: border-box; /* NEW */
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
I think that two images will clarify everything
Now I have (jsfiddle):
And I am wondering is it possible to do that:
You could use :after to hide it, crude I know, but works in the latest browsers:
#column1:after{
display:block;
content:'';
background-color:#f6f6f6;
height:100%;
width:5px;
position:absolute;
top:0;
right:-5px;
}
JSFiddle
Change/add the css:
#column1a {
margin-right: 200px;
border-bottom: 5px solid #E3E3E3;
background-color:#E3E3E3;
padding: 5px;
}
#column1a span { background-color: white; display:block;}
Alter the html to:
<div id="column1a"><span>Ut enim
This is only a rough guide so I'll leave it up to you to tidy up.
Give Like this
#Coloumn1{position:absolute}
Demo > http://jsfiddle.net/TPNpy/285/
Try following code:
#wrapper {
position: relative;
}
#left-section {
position: absolute;
left: 0;
width: 200px;
height: 100px;
border: 3px solid black;
border-right: none;
float: left;
background-color: white;
z-index: 5;
}
#right-section {
position: absolute;
left: 200px;
width: 100px;
height: 300px;
border: 3px solid black;
float: left;
}
<div id="wrapper">
<div id="left-section"></div>
<div id="right-section"></div>
</div>
On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.
try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}
Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.
You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/