When I put width with % I lose 1px in some value.
Here's a fiddle
HTML:
<div class="div_centent " >
<div class="ligne_inscription" >
<div class="label_inscription">Email :</div>
</div>
</div>
CSS:
.div_centent {
width: 49%; /***** here the problem *****/
border: 1px solid #8096c4;
}
.ligne_inscription {
display: table;
width: 100%;
background-color: black;
}
.label_inscription {
display: table-cell;
}
With width: 49%; or width: 52%; I lose 1px, with width: 49%; and width: 50%; or a numerique vaue like width: 100px; it's okay.
Can somebody explain why?
P.S I want a explanation not to change the display from table to block because the problem is in the div with display: table not in the div where i put width: 49%; because with display: block it's okey
I think this is a rounding problem/bug with the display:table implementation.
I just looked it up on chrome and while defining width, it doesn't round down the number but when reading it for the child element it does round it down.
You'll see that the parent is 241.5625 pixels
While the child is 241px.
Don't know if having the border on the wrapper div is crucial but moving the border to the table one should solve the problem.
Some browsers will not do 50% + 50% = 100% width.
I believe it is because decimal values for pixels are rounded.
Very silly example, but for a 3px box, the browser may determine that the two halves should be 2px each so the total would be 4px.
dellchange
CSS
.ligne_inscription {
display: run-in; /**add**/
width: 100%;
background-color: black;
}
Related
I'm trying to figure out what are ways to stop borders from overflowing from it's parent container.
The only solution that I can come up is to set childs width and height by using calc() to calculate and subtract width and height of child's border.
Is there any better ways with dealing with this?
What solution would be suitable for pre-IE8?
Here's jsFiddle example.
CSS
.container {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
clear: both;
background-color: purple;
}
.child {
width: 100%;
height: 100%;
border: 5px solid red;
}
HTML
<div class="container">
<div class="child">
text
</div>
</div>
you have set the width and height of child element to 100 percent so obviously it will be equal to the container one. Now setting a border,it will take extra width and height that will overflow.
so the first solution is the changing dimensions.
.child {
width: 90%;
height: 90%;
border: 5px solid red;
}
Note-90% is only in this case.
and the other solution is
.child {
width: 100%;
height: 100%;
border: 5px solid red;
box-sizing:border-box;}
As #dlev said:
One option is to set box-sizing: border-box; on the child, which forces the border to be considered part of the child element's "box", rather than just the content.
But even if you one to use calc css method then just deduct the border size:
.child {
width: calc(100% - 5px);
height: calc(100% - 5px);
border: 5px solid red;
}
demo
I want to achieve the following effect: http://jsfiddle.net/3KJta/1/
However the solution I have uses a known width for the small div and the larger div. I need this to work with variable sized divs. The use case for this is a tooltip that appears above a smaller flexible sized element. The tooltip content isn't known and so the width could be anything.
So far I have:
<div class="small">
<div class="smaller"></div>
<div class="larger"></div>
</div>
and
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
}
.small {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 50px;
text-align: center;
}
.smaller {
width: 20px;
height: 20px;
border-color: red;
display: inline-block;
}
.larger {
width: 200px;
height: 200px;
border-color: blue;
display: inline-block;
margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}
If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).
See this example: http://jsfiddle.net/2SQ4S/1/
If you use and extra element you can do it:
<div class="small">
<div class="smaller"></div>
<div class="larger">
<div>I'm extra</div>
</div>
</div>
CSS
.larger {
position:relative;
left:50%;
width:8000%;
margin-left:-4000%;
text-align:center;
border:none;
}
.larger div {
width: 200px;
height: 200px;
border-color: blue;
margin:auto;
}
http://jsfiddle.net/3KJta/4/
although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:
http://jsfiddle.net/3KJta/7/
All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.
Basically I'd like to know how to achieve this:
A 100% UL with 5 x 20% (floated) LI children, with 3px gaps in between. The LIs have to be flexible (%) width so they can resize, but their gaps have to be fixed.
This can be done using CSS3 width: calc(20%-3px) but I need more basic CSS2 support. :(
What's the cleanest way to do this, please?
Well this is a bit of a work around, for it uses the container's background color as a border, but it works as expected (and with CSS2.1).
jsFiddle Demo
.outer {
background: lime;
border: 2px solid black;
display: table;
width: 100%;
}
.inner {
display: table-cell;
background: green;
width: 20%;
height: 50px;
border-left: solid 3px lime;
}
.inner:first-child {
border-left: none;
}
I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.
I am sure that this question is already answered, but I find it hard to search for it.
I have the following html:
<div id='outerBox'>
<div id='leftBox'><div id='secondLevelBox'></div></div>
<div id='rightBox'></div>
</div>
and the following css:
#outerBox {
width: 300px;
height: 200px;
border: 1px solid black;
}
#leftBox {
height: 100%;
width: 55%;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 45%;
background-color: yellow;
float: left;
}
#secondLevelBox {
height: 100%;
width: 100%;
}
(See http://jsfiddle.net/dsMdb/1/)
this displays ok. But if I now add a border: 1px solid red to one of the inner divs, they will grow 2 pixels and the layout will break: http://jsfiddle.net/dsMdb/5/
How can I wrokaround this? (solutions for IE >=8 and current FF are ok)
You can change the way the browser is supposed to calculate the offset for the border & layout.
Take a look at the Box Model properties in CSS3, this way you can define the offset etc.
The command you're looking for in CSS is box-sizing. By default this set to content-box, which adds the width, padding etc as different values on top of each other.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Should apply to your border as well normally.
Problem is that it adds a border on the outside of that inner div. Since your red border is 1px, then it adds total of 2px.
Quick way to fix this is to remove `2px` from the outer `div`s width.
#outerBox {
width: 298px;
height: 200px;
border: 1px solid black;
}
Also, I would like to add, that this fix is very browser compatible ;)
I would suggest to have pixel graduation in the width and accordingly give room for border, like
Since total width is 300 px,
#leftBox {
height: 100%;
width: 165px;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 145px;
background-color: yellow;
float: left;
}
now reduce the width accordingly and this would work across browsers.