I'm having an issue with a few divs within divs.
Ultimately I'd like the user to enter an address into an input box, click a search button, which then triggers an AJAX request (not included). Once the AJAX request has been completed, I want the resultsDiv to show (via a fadeIn call). There are two divs which act as container divs, with the classes inner and outer (this provides some padding on the inside of the container).
.outer, .inner {
display: block;
}
.inner {
padding: 20px;
clear: both;
}
.outer {
width: 65%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
padding: 0px;
-webkit-box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
-moz-box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
box-shadow: 0px 10px 26px 1px rgba(125,125,125,0.67);
}
#subResultsDiv {
border-radius: 10px;
border: 1px solid #C3DBE9;
}
As you can see on this jsFiddle, when the resultsDiv is shown the bottom of the div hangs over the outer div:
Is there any way to ensure that when the fadeIn function is called and the resultsDiv is shown, that both the outer and inner div expand with it to stop the "overhang"?
Apologies if the above isn't clear - and thanks in advance for any help
If you have any really good resources about how divs work (e.g. floating, block vs inline vs everything else) - please let me know. I really struggle with this area of CSS.
To make it easier, I created a jsFiddle for this here: http://jsfiddle.net/ond1ju6p/
I am trying to get three divs to align besides each other on top of another div. I thought that giving the first two the width of 33.33% and the third one a width of 33.34%, it would equal the 100% width but that's not working.
What am I doing wrong?
Here is the HTML
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
<div class="box-bottom">Three little piggies had an awesome day.</div>
And the CSS
.box-top-left {
background-color: #FFF;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-center {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-right {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.34%;
}
.box-bottom {
background-color: #FFF;
padding: 10px 30px;
border-width:0px 1px 1px 1px;
border-radius: 0px 0px 5px 5px;
border: 1px solid #C4C4C4;
}
The issue is because Inline-block divs respect whitespace. Thus your divs have tiny gaps between them from the return key.
Change:
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
to this:
<div class="box-top">
<div class="box-top-left">Pig One</div><div class="box-top-center">Pig Two</div><div class="box-top-right">Pig Three</div>
</div>
and then add the following css rule to your divs:
box-sizing: border-box;
and it works for me.
Border-box makes the border included in the width size. It has good cross browser support.
js fiddle: http://jsfiddle.net/ond1ju6p/2/
edit: you could also try adding display:flex to the parent instead of removing whitespace.
.box-top {
display:flex;
}
.box-top > div {
box-sizing: border-box;
}
Flex solution fiddle: http://jsfiddle.net/ond1ju6p/3/
You can use display table and table-cell like so:
.box-top {
display: table;
width: 100%;
}
.box-top-left,
.box-top-center,
.box-top-right {
display: table-cell;
width: 33%;
}
The problem is, that you add 1px of border to each side, and thus the boxes become larger than 33.33%. (The border is added by your browser after it has already set the width). The easiest way to fix it would be using calc(33.33% - 2px) as the width.
There are two issues hanging this up.
First is that inline blocks have implicit spacing, so they don't automatically bump right up against one another. That extra spacing is variable by browser and font size, so to get rid of it you can set font-size: 0 on the container element (in this case, .box-top). Of course you then need to reset the font-size on your child elements.
The next issue is that width doesn't include padding or border by default. So your boxes are 33.33%, plus another 2px (the border on both sides). The easiest fix for that is box-sizing: border-box on each child box, which will then include the border inside the width calculation. That would work on most newer browsers, but if your target browser doesn't support box-sizing (most do now, but check http://caniuse.com/#feat=css3-boxsizing) then you would need to fix it so that your boxes are even narrower to make sure the 1px border fits, and that can become a mess.
I would add "float:left;" and "box-sizing:border-box;" (without quotes) to .box-top-left, -middle, and -right and then "clear:both;" to .box-bottom. If that doesn't work I would also make all the widths for those 3 boxes 33.33%.
I have a div which I have positioned using the absolute positioning property of css. And now I want to know whether there is a way to allow this div showing in the exact same position that I am seeing right now in my screen even when the screen is smaller or larger without changing the absolute positioning property of the div?
this is just a rough example:
<div class="name"> I am somewhere in the body </div>
...................
..................so and so codes...
..................
<div class="display">I want to stand beside the class called name </div>
If I write the css for the display, Then it comes exactly beside the class name
.display {
position: absolute;
width: 200px;
top : 132px; [assume]
left : 200px; [assume]
border: #D3D3D3;
-webkit-box-shadow: 5px 5px 15px #888;
-moz-box-shadow: 5px 5px 15px #888;
box-shadow: 5px 5px 15px #888;
}
It is displaying correct for my screen. But if the screen size varies then it is no longer showing the correct position since I have used the absolute positioning property. But now I want to find whether there is a way or a trick to solve it without changing the absolute positioning property.
Wrap this like -
<div id="someId">
<div class="display"></div>
</div>
and add this css
#someId {
position: relative;
width: 0;
height: 0;
}
This seems like something for the float property, change your css like:
.display {
float:right;
width: 200px;
border: #D3D3D3;
-webkit-box-shadow: 5px 5px 15px #888;
-moz-box-shadow: 5px 5px 15px #888;
box-shadow: 5px 5px 15px #888;
}
I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.
I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.
Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?
Set box-sizing property to border-box:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
It works on IE8 & above.
You can also use box-shadow like this:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Example here: http://jsfiddle.net/nVyXS/ (hover to view border)
This works in modern browsers only. For example: No IE 8 support.
See caniuse.com (box-shadow feature) for more info.
Probably it is belated answer, but I want to share with my findings. I found 2 new approaches to this problem that I have not found here in the answers:
Inner border through box-shadow css property
Yes, box-shadow is used to add box-shadows to the elements. But you can specify inset shadow, that would look like a inner border rather like a shadow. You just need to set horizontal and vertical shadows to 0px, and the "spread" property of the box-shadow to the width of the border you want to have. So for the 'inner' border of 10px you would write the following:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Here is jsFiddle example that illustrates the difference between box-shadow border and 'normal' border. This way your border and the box width are of total 100px including the border.
More about box-shadow:here
Border through outline css property
Here is another approach, but this way the border would be outside of the box. Here is an example.
As follows from the example, you can use css outline property, to set the border that does not affect the width and height of the element. This way, the border width is not added to the width of an element.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
More about outline: here
Yahoo! This is really possible. I found it.
For Bottom Border:
div {box-shadow: 0px -3px 0px red inset; }
For Top Border:
div {box-shadow: 0px 3px 0px red inset; }
You can use the properties outline and outline-offset with a negative value instead of using a regular border, works for me:
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>
Although this question has already been adequately answered with solutions using the box-shadow and outline properties, I would like to slightly expand on this
for all those who have landed here (like myself) searching for a solution for an inner border with an offset
So let's say you have a black 100px x 100px div and you need to inset it with a white border - which has an inner offset of 5px (say) - this can still be done with the above properties.
box-shadow
The trick here is to know that multiple box-shadows are allowed, where the first shadow is on top and subsequent shadows have lower z-ordering.
With that knowledge, the box-shadow declaration will be:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {
width: 100px;
height: 100px;
background: black;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}
<div></div>
Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.
outline with outline-offset
For the same effect as above the outline declarations would be:
outline: 5px solid white;
outline-offset: -10px;
div {
width: 100px;
height: 100px;
background: black;
outline: 5px solid white;
outline-offset: -10px;
}
<div></div>
NB: outline-offset isn't supported by IE if that's important to you.
Codepen demo
Use pseudo element:
.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}
<div class='button'>Hello</div>
Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.
We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.
This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.
Consider this example:
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Here .button width is constrained using the parent element. Setting the border-left-width adjusts the content-box size and thus the position of the text.
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Using the pseudo-element approach does not affect the content-box size.
Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.
I know this is somewhat older, but since the keywords "border inside" landed me directly here, I would like to share some findings that may be worth mentioning here.
When I was adding a border on the hover state, i got the effects that OP is talking about. The border ads pixels to the dimension of the box which made it jumpy.
There is two more ways one can deal with this that also work for IE7.
1)
Have a border already attached to the element and simply change the color. This way the mathematics are already included.
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2 )
Compensate your border with a negative margin. This will still add the extra pixels, but the positioning of the element will not be jumpy on
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
11 Years Later but heres the answer:
Just use outline:
outline: 0.2vw solid red;
I hope i can help someone who sees this question also 11 Yeas Later.
for consistent rendering between new and older browsers, add a double container, the outer with the width, the inner with the border.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
this is obviously only if your precise width is more important than having extra markup!
If you use box-sizing: border-box means not only border,
padding,margin, etc. All element will come inside of the parent
element.
div p {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height:100%;
border: 20px solid #f00;
background-color: #00f;
color:#fff;
padding: 10px;
}
<div>
<p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
Best cross browser solution (mostly for IE support) like #Steve said is to make a div 98px in width and height than add a border 1px around it, or you could make a background image for div 100x100 px and draw a border on it.
You can look at outline with offset but this needs some padding to exists on your div. Or you can absolutely position a border div inside, something like
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
You might need to fiddle with margins on the fake borders div to fit it as you like.
A more modern solution might be to use css variables and calc. calc is widely supported but variables is not yet in IE11 (polyfills available).
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
Although this does use some calculations, which the original questions was looking to avoid. I think this is an ok time to use calculations as they are controlled by the css itself. It also has no need for additional markup or misappropriating other css properties that may be needed later on.
This solution is only really useful if a fixed height isn't needed.
One solution I didn't see mentioned above is the case where you have padding on your input, which I do 99% of the time. You can do something along the lines of...
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
What I like about this is that I have the full menu of border + padding + transition properties for each side.
I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.
Example:
I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}
(source: wstaw.org)
By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.