Why is input element does not take up 100% of the width of its container automatically after changing its display to block? Are there some other factors which also have an influence on that? Thanks. Demo see below:
some explanation: 1. I comment out width:100% intentionally because block level element is supposed to take up 100% of its container width.
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
/*width:100%;*/
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
I'm not an expert, but I'm pretty sure it's because you have commented out width:100%. try decommenting that then it should work
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
width:100%;
}
Changed the code check now
#container {
width: 300px;margin: auto;
background-color: red;
}
input[type="text"] {
opacity:0.5;
width:100%;
border-width:0;
padding:0;
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
The input element by default has a border: 2px and a padding: 1px 0 in google chrome
When you were actually applying a width of 100%, the input actually had a width greater than the actual div outside covering it
width of input(set to width of div) + border + padding > width of div
There is a tiny little white area on the right, in case you uncomment width:100% in your code. That white area actually is the input. If you set the border to zero that's really enough to fix things
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity: 0.5;
width: 100%;
border: 0
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
Default size of input is 20, so if you do not define size or css rule for your input automatically its size is 20.
The best solution is adding width.
try this code:
#container
{
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"]
{
display: block;
opacity:0.5;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you want to be responsive it is better to add box-sizing to all element like this:
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
This seems so simple. I'm trying to get 10 divs inside a parent div all 10% wide. The parent div is 960px and centered on the page with margin:0 auto and had a red background. It does not matter if I make the with of .tenPercent 10% or 96px. The result is the same, only 9 fit and the 10th wraps. There looks to be a left margin (or padding maybe) on them but what would cause this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tenPercent
{
color:Black;
display:inline-block;
border:1px solid black;
width:10%;
}
</style>
</head>
<body>
<div style="width:960px;background-color:Red;margin:0 auto">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
</body>
</html>
You have 2 problems in your CSS:
The space between the divs is because the inline-blocks are separated by a white space. You can remove the space with font-size: 0;.
The 2nd problem is the width of the elements, which is effected by
the border. box-sizing: border-box; will fix that.
.container {
width: 960px;
background-color: Red;
margin: 0 auto;
font-size: 0; /** this removes the space between the divs **/
}
.tenPercent {
box-sizing: border-box; /** this adds the borders into the width **/
color: Black;
display: inline-block;
border: 1px solid black;
width: 10%;
font-size: 14px;
}
<div class="container">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
You should use float: left instead of display: inline-block.
In addition, the border is excluded in the width calculation, so actually your elements are 10% + 2 pixels (1px on the left and 1px on the right). You should add a box-sizing property:
.tenPercent {
color: #000;
float: left;
border: 1px solid black;
width: 10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since you're now using float for the child elements, you'll also need to add a clearfix to the container. It's probably best to add a class to the container (something semantic like container), and then use the following CSS:
.container {
width: 960px;
background: red;
margin: 0 auto;
}
.container:after {
display: table;
content: '';
clear: both;
}
jsFiddle Demo
You have other options than float and display:inline-block;
flexbox can do that very easily...no clearfixing, no whitespace...simple.
Support: IE10+ per CanIUse.com
* {
box-sizing: border-box;
margin: 0;
}
.parent {
background-color: plum;
text-align: center;
margin: 0 auto;
display: flex;
}
.tenPercent {
flex: 0 0 10%;
/* restricted to 10% width */
border: 1px solid grey;
}
<div class="parent">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
Your css for should look like this:
.tenPercent {
color:Black;
float:left;
box-sizing: border-box;
display:inline-block;
border:1px solid black;
width:10%;
}
Notice the additions of float: left and box-sizing. float: left will get rid of the spacing, while box-sizing: border-box; will take care of the pixels added from the borders.
Here's a fiddle to play with: http://jsfiddle.net/0ztoe6tk/
Add the float:left; to the .tenPercent class.
It's from display: inline-block. If you float your columns to the left they will work as expected.
When you use display: inline-block spaces/returns etc between the elements that have inline-block applied to them will be taken into account and rendered. You can think of it as adding a single space between each inline-block element.
This is the main downside of using display: inline-block over floats in my humble opinion.
It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. from here
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.Row {
}
.Row__item {
color: #000;
display: inline-block;
border: 1px solid black;
width: 10%;
margin: 0;
}
<div class="Row"><div class="Row__item">1</div><div class="Row__item">2</div><div class="Row__item">3</div><div class="Row__item">4</div><div class="Row__item">5</div><div class="Row__item">6</div><div class="Row__item">7</div><div class="Row__item">8</div><div class="Row__item">9</div><div class="Row__item">10</div></div>
I have a div and I want it to fill the whole page without any horizontal or vertical scrolling.
The html is like:
<body>
<div class="container">
</div>
</body>
and the css like:
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
Normally with vh it works, but because of some padding applied on container it doesn't work. So what technique can I use to solve this problem?
The JSFiddle is here
Try using box-sizing: border-box on your .container element. Doing so will have the padding and border of an element included with width and height assignments.
.container {
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
width: 800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
This has to do with the way that css adds the padding to the height to calculate the total height. There's one quick and flexible fix for all of your elements though, as explained in Paul Irish's box-sizing:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Not Sure Will this help you but you can give it a try-
give position relative to your body and position fixed to your div.container with width 100% and height 100%.
body{
background: #222;
margin:0;
padding: 0;
position:relative;
}
.container{
position:fixed;
left:0;
top:0;
width:100%;
background: red;
height: 100%;
}
Box-sizing FTW! If you need to include the padding as part of the elements dimensions then box-sizing: border-box is your only hope.
FWIW you should be aware that Viewport Units are not fully supported so if you need something more cross-browser you can easily avoid using 100vh by using 100% instead.
E.G:
html, body {
height:100%;
min-height:100%;
}
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: red;
height: 100%;
box-sizing: border-box;
}
<div class="container">
</div>
I have a layout that works fine in Firefox and Chrome but not in IE or Opera, so I'm looking for a better solution or a way to modify my present solution without using any JavaScript. The problem is that I can't get the innermost divs to get maximal height within the divs containing them, i.e. #l within #left and #r within #right.
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="left">
<div id="l">
L
</div>
</div>
<div id="right">
<div id="r">
R
</div>
</div>
</div>
</div>
Here's the CSS I've come up with so far:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, div {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
}
html, body {
height: 100%;
}
#wrap {
background-color: #dddddd;
width: 100%;
height: 100%;
display: table;
border-spacing: 1em;
}
#header {
height: 2em;
display: table-row;
}
#content {
background-color: #f49837;
width: 90%;
display: table-row;
padding: 1em;
}
#left {
width: 30%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#right {
width: 70%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#l, #r {
width: 100%;
height: 100%;
background-color: #e1098f;
border-spacing: 0.5em;
display: table;
}
And here's a jsfiddle that shows what it should look like (if you look at it in Firefox or Chrome). The pink fields should cover the entire height of the purple ones except for padding.
http://jsfiddle.net/SsyAr/1/
Edit: Even if I should solve the IE/Opera problem I realize that I need something else as well, since there is no colspan feature available for CSS tables, and I'd need that for the header if I want it to have a width of 100%. The standard solution seems to be using display: table-caption + display: table-row-group. But however I try I can't make the caption part of the total height of 100% of the viewport. The table-row-group will be 100% high and the caption is added upon that.
This is what i'm doing right now. I'm using LESS CSS for my design. I need to put 2 spans between a specified input. all the elements should be 100% width. spans should always 20px width input width can be change according to the screen width. Can anyone help me?
span width: 20px;
<div class="wrapper">
<span class="span-one">span</span>
<input type="text" class="input">
<span class="span-two">span</span>
</div>
You can achieve this with absolute positioning. It will take the spans out of the flow and put them on top of the input. You should also put the input in a div to do this as it doesn't naturally get 100% width when display:block set on it.
HTML
<div class="wrapper">
<span class="span-one">span</span>
<div class="input"><input type="text" class="input"></div>
<span class="span-two">span</span>
</div>
CSS
.wrapper { position: relative; }
div.input { margin: 0 20px; }
input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
span.span-one {
position: absolute;
width:20px; height:20px;
left:0; top:0;
background-color: red; }
span.span-two {
position: absolute;
width:20px; height:20px;
right:0; top:0;
background-color: red; }
Here's the fiddle: http://jsfiddle.net/ywUeu/1/
Of course the word 'span' in the spans is longer than 20px so it comes out of the span.
Might be best to add 'box-sizing' to input as I've done too.
Positioning is not ideal but you already approved the answer...this is an FYI....
Instead of positioning use: display: table-cell;
http://jsfiddle.net/Riskbreaker/CBC5A/1/
With your HTML:
.wrapper, .text {
width: 100%;
}
.wrapper > span {
display: inline-block;
width: 20px;
}
.wrapper.input {
width: calc(100% - 40px);
}
Better way:
<div class="wrapper">
<div class="input"><input type="text" class="text-input"></div>
</div>
CSS:
/*
.wrapper, .input{ width is 100% by default }
*/
.text-input{
margin: 0 20px;
width: calc(100% - 40px);
}