I can't seem to be able to wrap my mind around this one.
It seems that by adding some padding (padding-left: 3px) to my textarea, and it pushes it right out of my div with the border. Adding some padding for text inside the summary box would be useful as it would be more legible to the user.
Here is the result:
This is what it should look like:
Here is the HTML / CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.fcontent_text {
font-size: 8.5pt;
text-align: right;
color: rgb(11,63,113);
}
#fcontent_container {
width: 800px;
display: block;
position: relative;
margin: 5px;
}
#fcontent_wrapper {
border: 1px solid rgb(128,128,128);
}
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
}
</style>
</head>
<body>
<div id="fcontent_container">
<div class="fcontent_text">Summary</div>
<div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
</div>
</body>
</html>
Add box-sizing: border-box to #summary so that you can set both width: 100% and left and right padding without the contents spilling over into the container.
box-sizing
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.
For cross-browser compatibility, be sure to include prefixes:
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Using box-sizing
You can use box-sizing: border-box;
Check this out: http://codepen.io/gopkar/pen/HiEjn
Without box-sizing
Change the width of your textarea from width: 100% to width: 795px;
Have a look at http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>
For some odd reason this solution seems to circumvent everything and works flawlessly:
<div style="width: 800px">
<div style="text-align: right;">Expand</div>
<div style="padding-right: 6px;">
<textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
</div>
</div>
Related
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
height: 100px;
width: 500px;
padding: 20px;
border: 40px solid black;
background-color: blue;
}
<div class="box">
With border-box - with padding & border
</div>
With border-box - with padding & border
Why in the example above padding applied only from the top and left?
To be clear again: box-sizing: border-box; make the box include the border into width and height calcul of the block.
It does not apply padding-bottom because you are setting a box of height: 100px
But next to that you are setting border of 40px and padding of 20px. So if you think about it reachs: 40px + 40px + 20px + 20px = 120px just for padding and border.
So this is going over the block height you set 120px > 100px. So html try to make its best based what your telling it.
I would recommand as follow:
.box {
min-height: 100px;
height: auto;
}
DEMO:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
min-height: 100px;
height: auto;
width: 500px;
padding: 20px;
border: 40px solid black;
background-color: blue;
}
<div class="box">
With border-box - with padding & border
</div>
I have the fiddle here: https://jsfiddle.net/ufLpqdtj/
My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.
In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.
Any thoughts or suggestions?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>
What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.
Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.
In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/
Well you shouldn't use the div as a button. There are html elements for that.
If correctly understood what you want to achieve...
form {
width: 100%;
display: inline-flex;
justify-content: center;
}
#commonSearchTerm {
width: 80%;
}
#searchButton {
width: 80px;
border-radius: 0;
background-color: red;
border: none;
padding: 2px;
color: white;
}
<form >
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<input id="searchButton" type="submit">
</form>
This is using flexbox which is is more flexible when creating responsive stuff.
I need your help,
It seems that I am having some difficulty with attempting to add a div around a textarea inside a container div as well as a border for the div encompassing my button at the bottom of the container div.
First problem: the right side border is missing
Second problem, the 1px solid red is missing from the inner2 div.
Here is a pic of the problem and the desired result:
Desired result is:
Here is the HTML & CSS in question:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
text-align: center;
width: 500px;
border: 1px solid green;
}
#summary {
width: 100%;
height:100%;
border: 0;
}
#inner1 {
height: 500px;
}
#inner2 {
border-top: 1px solid red;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id='inner1'><textarea id="summary"></textarea></div>
<div id="inner2"><input type="button" value="Close"></div>
</div>
</body>
</html>
It's because the textarea element has default padding. Since padding isn't included in an element's width/height calculations, it overflows outside of the parent element because a width of 100% + the border is greater than the parent elements width.
You could either remove this padding, or include the padding in the dimension calculations by adding box-sizing: border-box to the textarea element:
#summary {
width: 100%;
height: 100%;
border: 0;
box-sizing: border-box;
}
Add overflow: hidden and box-sizing: border-box; like below:
#container {
text-align: center;
width: 500px;
border: 1px solid green;
}
#summary {
width: 100%;
height:100%;
border: 0;
box-sizing: border-box;
}
#inner1 {
height: 500px;
overflow: hidden;
}
#inner2 {
border-top: 1px solid red;
width: 100%;
}
I got an input form that is supposed to be 100% wide inside my .content class and have 20px padding inside that class and 8px padding to the left inside of that input form. The problem is that the left padding inside the input form overrides the padding inside the .content class to the right.
JS: http://jsfiddle.net/8AsxX/1/
CSS:
.content {
min-height: 100%;
background-color: #000;
padding: 20px;!important
}
input.text.big {
background-color: #ffffff;
height: 30px;
width: 100%;
border: solid 1px #cccccc;
padding-left: 8px;
color: #333;
}
HTML:
<div class="content">
<input class="text big" name="url" type="url" placeholder="Example: http://www.facebook.com/FANPAGE-URL" required="">
</div>
The whole width is calculated like 100% + 8px for the input element, so it is overlapping parent div with padding:20px. You can fix it using calc for the input :
width: calc(100% - 8px);
Example
Box sizing should do the trick.
.content {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I believe the behaviour is by design. You can compensate for it by increasing the right-padding of the container:
.content {
min-height: 100%;
background-color: #000;
padding: 20px 28px 20px 20px;
}
I am trying to code a chat page but I got a problem with the sizing of the divs :/
I have a structure like this:
<div class="page">
<div class="chat-holder">
<div class="chat-text">
</div>
</div>
</div>
and the page class is (let's say the width and the height of the screen so it is
.page {
width: 100%;
height: 100%;
}
The chat-holder I want to have a width of 740px and the height should be any height but not more than the browser height and a background white and a 20px padding around the chat area (so far I tried this):
.chat-holder {
background: #fff;
width: 740px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Now my chat area I want to have a 1px black border inside this chat-holder and if the chat is not bigger than the browser minus that 40px padding, I want it to have the size of the text that is in it. If it is bigger, I want it to have scroll inside it (so far I tried this)
.chat-text {
width: 100%;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
But this doesn't work, the chat-text div goes out of the chat-holder, as i see it is because the max-height doesn't work inside a max-height. I hope there is a work-around on this issue because I really don't want to use jQuery or something to fix it.
Thank you in advance
EDIT: jsFiddle http://jsfiddle.net/KjX7s/2/
You have to set the height as well as the max-height:
.page {
width: 100%;
height: 100%;
}
.chat-holder {
background: #fff;
width: 740px;
min-height: 20px;
max-height: 100%;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.chat-text {
width: 100%;
min-height: 20px;
max-height: 100%;
border: 1px solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
See the fiddle: http://jsfiddle.net/KjX7s/14/
Add
overflow: auto;
inside .chat-holder .
And put an height calculated with CSS Calc():
max-height: calc(100% - 41px);
http://jsfiddle.net/KjX7s/5/