This question already has answers here:
Prevent padding from making an element bigger?
(2 answers)
Closed 6 years ago.
I'm not a designer. When writing CSS it often happens that I need to add some padding to an element. How do you avoid that padding to propagate to the parent element ?
HTML:
<div id="outer">
<input id="login">
</div>
CSS:
#outer {
width: 300px;
}
#login {
width: 100%;
padding: 1em;
}
If you use that HTML+CSS, you'll see that the #outer element is bigger than 300px. The easiest solution if to re-write the #login's width to "300px - to_pixel(1em)". It works well but also means that now the font size needs to be fixed. Is there another way where I don't need to convert everything in pixels ?
What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to your #login CSS. This is supported in most modern browsers, including IE8+.
You can css box-sizing property like this:
#outer {
width: 300px;
background:red;
height:100px;
}
#login {
width: 100%;
padding: 1em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
http://jsfiddle.net/TQXdn/
box-sizing does not work in IE7
Yes you have to fix this or adjust according to width + padding . The Actual Size when you are using padding will be
actual size = Defined Width + Padding Width + Border Width
then if you want to limit it to the container size then take care about the CSS box model
#outer {
width: 300px;
border:1px solid red;
padding:1em;
}
#login {
width: 100%;
}
It will put the input in center of the container.. Use Box Model as suggested in question comments also.
There is my solution:
width : calc( 100% - 10px );
padding: 5px;
#outer {
width: 300px;
background:red;
height:100px;
position: relative;
}
#login {
position: absolute;
left: 1em;
right: 1em;
top: 1em;
bottom: 1em;
}
See it here:
http://jsfiddle.net/22ABj/
Related
When I set the padding size for input field it automatically changed the size. It becomes bigger.
.container{
width: 150px;
}
.item label{
display: block;
width: 100%;
margin-bottom: 10px;
}
.from-item{
width: 100%;
}
input[type="text"]{
width: 100%;
padding: 5px;
}
JSFfiddle
You should think about putting this in your CSS:
* { box-sizing: border-box }
This alters the box model such that padding will not add to the size that an element occupies on the screen. It is, to my mind and the mind of many others, a much better model to work with:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
General info on the box model: http://css-tricks.com/the-css-box-model/
You can use box-sizing:border-box to solve your problem, but it is a css3 property. Thus incompatible with old browsers.
Another way to achive this is put a wrapper div around input & give padding to it.
<div class="ibox"><input type="text" class="from-item"></div>
.ibox{
padding: 5px;
}
input[type="text"]{
width: 100%;
}
Here is Demo link http://jsfiddle.net/aq8mP/1/
I know this questions has already been answered before and I've read the topics :
Make div take all space left after another div
Expand div to take remaining width
Expand div to max width when floatleft is set
The magic of overflow hidden (external)
However I can't manage to implement them in my case or they simply don't seem to work as I try to have a fix width on the right and a flexible width on the left (unlike the above examples).
Here is my problem (which is fairly simple) : I have a form with a search field (left) and a span element (right). The span element has a fixed width and height. I want the input to fit the remaining left space.
form :
<div id="container">
<form>
<input type="search" />
<span class="submit"></span>
</form>
</div>
style.css :
#container {
width: 300px;
}
[type="search"] {
/* Positionning
* ------------ */
display: block;
height: 40px;
padding: 0px 10px;
vertical-align: top;
}
.submit {
/* Positionning
* ------------ */
display: block;
height: 40px;
width: 50px;
/* Styling
* ------- */
background-color: #CF0526;
}
From what I've read, I thought that a width: 100%; overflow: hidden on the input and a float: right on the span who be enough, sadly not. Here is a jsfiddle of my problem, hopefully it may help you.
EDIT: I changed the title from "left div" to "left input" as it may matter, especially since this solution does not work while it looks accurate for divs positionning.
You can try with the property calc like this:
input[type="search"] {
width: calc(100% - 40px);
margin:0;
padding:0;
height:30px;
float:left;
}
.submit {
float:left;
width: 40px;
height: 30px;
background-color: red;
}
The demo http://jsfiddle.net/SL3FB/10/ ... Maybe a problem the compatibility
Another solution using box.sizing who has more compatibility: http://jsfiddle.net/SL3FB/18/
You can substract the width from the span to the width from the textfield which is 100%.
Here is the fiddle http://jsfiddle.net/SL3FB/15/.
Code is like this:
width:calc(100% - 50px);
float:left;
Make 'em both float:left; to have a better result!
Hope this works for you.
Use CSS Tables
1) Set display: table-cell for both the input and the span
2) Set a fixed width on the span and (the trick:) width:100% on the input
FIDDLE
#container {
width: 300px;
border: 1px solid black;
}
form
{
display:table;
width: 100%;
}
.submit {
display:table-cell;
width: 40px;
height: 30px;
background-color: red;
}
input
{
width: 100%;
display:table-cell;
}
Does this work for you?
http://jsfiddle.net/SL3FB/4/
I've given your search a width of 85% so it fits up agains the red box.
.search {
width:85%;
}
This is my CSS code;
#wrap {
width:50em;
max-width: 94%;
margin: 0 auto;
background-color:#fff;
}
#head {
width:50em;
height:10em;
max-width: 100%;
margin: 0 auto;
text-align:center;
position: relative;
}
#css-table {
display: table;
margin: 1em auto;
position: relative;
width:50em;
max-width: 100%;
}
#css-table .col {
display: table-cell;
width: 20em;
padding: 0px;
margin: 0 auto;
}
#css-table .col:nth-child(even) {
background: #fff;
}
#css-table .col:nth-child(odd) {
background: #fff;
border-right: 4px double #b5b5b5;
}
And my HTML code;
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
Is there a reason why is Chrome doing this?
Technically Chrome is following the rules because max-width should only apply to block elements.
From MSDN docs:
The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.
max-width property
MSDN Doc
The solution I found was using table-layout: fixed and width: 100%
Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.
I was able to use a mixin(SASS) to fix the issue.
#mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}
I'm trying to develop a horizontal web page, with fixed height and variable width.
In order to get it, I need a row of floating <div>s to expand the <body> width.
|------------- body --------------| /* variable width */
|-div-| |-div-| |-div-| |-div-| /* fixed width */
The following code doesn't seem to work:
body{
height: 40px;
}
div{
width: 2000px;
height: 20px;
background: red;
margin: 10px;
float: left;
}
http://jsfiddle.net/7cS2R/12/
Is is possible to do so without using javascript?
Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:
display: inline-block;
or
position:absolute;
on your body-element.
EDIT: after you clarified your question - simply add the white-space declaration to your body:
white-space:nowrap;
Demo
Try this:
body{
height: 40px;
display: inline-block;
}
http://jsfiddle.net/7cS2R/6/
How can I make a block filling the full width of its container given the fact both are absolutely positionned, and the inside one has padding.
I've made a JSFiddle:
http://jsfiddle.net/dmdBB/
here a sample:
<style>
.containerOut {
position: absolute;
width: 400px;
height: 400px;
border: thin solid black;
}
.containerIn {
position: absolute;
outline: 1px solid red;
width: auto;
padding: 4px;
}
</style>
<div class="containerOut">
<div class="containerIn">
im not large enough
</div>
</div>
In this sample, the .containerIn element is too thin. If I set its width to 100%, it would overflow because of its padding.
PS: I would like a CSS solution, I know that placing an intermediate HTML container with 100%width and 0margin/padding/border would solve the problem.
Instead of using width: 100%, you need to use left: 0; right: 0.
To fix the last example, you can use word-wrap: break-word.
See: http://jsfiddle.net/QjdD5/1/
.containerIn {
width: auto !important; /*just to override your inline CSS */
left: 0;
right: 0;
word-wrap: break-word
}
right:0px;
left:0px;
overflow:hidden;
for the inner element and if you dont want that red border showing on the black border you can use overlfow:hidden for outer div
#biab; padding & border add width to an element.
may be you can put in your css:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
http://jsfiddle.net/sandeep/dmdBB/28/
replace...
width: auto;
with...
left:0;
right:0;
Tested on chrome