Is there any better way of setting two borders like in the example below? I could only do it with positioning. I'm new here so I apologize for any mistakes whatsoever.
.border1 {
margin: 0 auto;
height: 300px;
width: 250px;
border: 9px solid red;
position: relative;
}
.border2 {
border: 9px solid blue;
height: 250px;
width: 300px;
position: absolute;
top: 12px;
left: -33px;
}
<div class="border1">
<div class="border2"></div>
</div>
Absolute is indeed a good and easy way here.
You can also use a pseudo and only coordonates to size the second border box.
.border1 {
margin: 0 auto;
min-height: 150px;/* allow it to grow */
width: 250px;
padding:20px 0.5em;
border: 9px solid red;
position: relative;
}
.border2:before {
content:'';
border: 9px solid blue;
pointer-events:none;/* to allow clicking through else you may use a negative z-index */
position: absolute;
top: 12px;
bottom:12px;
left: -33px;
right:-33px;
}
<div class="border1 border2">
add anything here instead setting height
</div>
This is a different approach. I used box-shadow as the second border and you will no longer need a second div for second border.
.border{
margin:0 auto;
height:300px;
width:250px;
border:9px solid red;
position:relative;
box-shadow: 0 0 0px 9px blue;
}
<div class="border"></div>
You can do it with the Flexbox and without unnecessary calculations:
.border1 {
margin: 0 auto;
height: 300px;
width: 250px;
border: 9px solid red;
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
align-items: center; /* and vertically */
}
.border2 {
flex: 0 0 300px; /* doesn't shrink, flex-basis set to "300px" (initial width) */
border: 9px solid blue;
height: 250px;
}
<div class="border1">
<div class="border2"></div>
</div>
Related
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
I have a parent container, with some child components inside. The last child has to be placed at the bottom of the container. I tried using justify-content: space-between, but it doesn't work for me because I need that the space between the last element and the other elements is greater and noticeable. I ended up trying position:absolute, bottom: 0, but the width of the child is greater than the parent.
Perhaps there's a better way to do it by mixing with flex, just haven't been able to do it.
.Parent {
background: #F8F8F8;
height: 400px;
padding: 20px;
width: 395px;
position: relative;
max-width: 395px;
border: solid 1px red;
}
.First--Child {
border: solid 1px blue;
height: 40px;
margin: 10px 0;
}
.Second--Child {
border: solid 1px green;
height: 40px;
margin: 10px 0;
}
.Third--Child {
border: solid 1px violet;
height: 40px;
margin: 10px 0;
}
.Last--Child {
border: solid 1px cyan;
height: 60px;
position: absolute;
bottom: 0;
width: 100%;
margin: 0 0 10px 0;
display: flex;
justify-content: space-between;
}
.Left--Button,
.Right--Button {
border: solid 1px gray;
width: calc(100% - 300px);
}
<div class='Parent'>
<div class='First--Child'>
</div>
<div class='Second--Child'>
</div>
<div class='Third--Child'>
</div>
<div class='Last--Child'>
<button class='Left--Button'>Left</button>
<button class='Right--Button'>Right</button>
</div>
</div>
The width of the last child isn't wider than the parent - its the same width. It is the margin that has caused it to be out of alignment.
If the bottom placement is correct for your needs, you could get the horizontal alignment sorted either by removing the padding on the parent, setting the child to:
left: -20px
or
margin-left: -20px
, or adding
box-sizing:border-box
to the parent
If you must use this layout technique, you could calculate the last--child's width minus the padding of the parent.
.Parent {
background: #F8F8F8;
height: 400px;
padding: 20px;
width: 395px;
position: relative;
max-width: 395px;
border: solid 1px red;
}
.First--Child {
border: solid 1px blue;
height: 40px;
margin: 10px 0;
}
.Second--Child {
border: solid 1px green;
height: 40px;
margin: 10px 0;
}
.Third--Child {
border: solid 1px violet;
height: 40px;
margin: 10px 0;
}
.Last--Child {
border: solid 1px cyan;
height: 60px;
position: absolute;
bottom: 0;
width: calc(100% - 40px);
margin: 0 0 10px 0;
display: flex;
justify-content: space-between;
}
.Left--Button,
.Right--Button {
border: solid 1px gray;
width: calc(100% - 300px);
}
<div class='Parent'>
<div class='First--Child'>
</div>
<div class='Second--Child'>
</div>
<div class='Third--Child'>
</div>
<div class='Last--Child'>
<button class='Left--Button'>Left</button>
<button class='Right--Button'>Right</button>
</div>
</div>
Try this for your CSS. I split the buttons into two classes and just floated them while adding a height percentage for the fill. This is assuming you are okay with absolute positioning.
.Parent {
background: #F8F8F8;
height: 400px;
padding: 20px;
width: 395px;
position: relative;
max-width: 395px;
border: solid 1px red;
}
.First--Child {
border: solid 1px blue;
height: 40px;
margin: 10px 0;
}
.Second--Child {
border: solid 1px green;
height: 40px;
margin: 10px 0;
}
.Third--Child {
border: solid 1px violet;
height: 40px;
margin: 10px 0;
}
.Last--Child {
border: solid 1px cyan;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: block;
justify-content: space-between;
}
.Left--Button {
height:100%;
float:left;
border: solid 1px gray;
width: calc(100% - 300px);
}
.Right--Button {
height: 100%;
float: right;
border: solid 1px gray;
width: calc(100% - 300px);
}
The last child has to be placed at the bottom of the container. I tried using justify-content: space-between, but it doesn't work for me because I need that the space between the last element and the other elements is greater and noticeable.
With justify-content: space-between (in a vertical container) or align-content: space-between (in a horizontal container) you can pin the last item to the bottom, and not impact the siblings' position, only if there are two items (one stays on top, the other stays at the bottom).
But if there are more than two items, then this method will not work because space-between distributes space evenly between items, causing the items between the first and last to spread out.
Since you have more than two items in your container, you need another method.
Absolute positioning indeed works. It pins the last item to the bottom. However, it also removes the item from the normal flow, meaning that it doesn't take up space and siblings can overlap it.
Flexbox, however, provides a clean and efficient alternative: auto margins. By setting the last item to margin-top: auto, it shifts to the bottom of the container, while its siblings remain at the top.
Here's a complete explanation, which includes a comparison of space-between and auto margins:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
.Parent {
display: flex; /* new */
flex-direction: column; /* new */
height: 400px;
padding: 20px;
max-width: 395px;
border: solid 1px red;
background: #F8F8F8;
}
.First--Child {
border: solid 1px blue;
height: 40px;
margin: 10px 0;
}
.Second--Child {
border: solid 1px green;
height: 40px;
margin: 10px 0;
}
.Third--Child {
border: solid 1px violet;
height: 40px;
margin: 10px 0;
}
.Last--Child {
border: solid 1px cyan;
height: 60px;
margin: auto 0 10px 0; /* adjustment to margin-top */
display: flex;
justify-content: space-between;
}
.Left--Button,
.Right--Button {
border: solid 1px gray;
width: calc(100% - 300px);
}
<div class='Parent'>
<div class='First--Child'></div>
<div class='Second--Child'></div>
<div class='Third--Child'></div>
<div class='Last--Child'>
<button class='Left--Button'>Left</button>
<button class='Right--Button'>Right</button>
</div>
</div>
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
I use the above code to display a big div with two divs in it. For the first one I use position: absolute to place it on bottom left of the div.
How can I extend the height of the second gray one so that it's 5 pixels above the first, but without having to measure its exact height in pixel (like the pic below)? I can set height: 50px; for example but is there another way?
I would use a flexbox approach rather than absolute positioning (comments in css below)
div.div1 {
display: flex;
flex-direction:column;
/* add the above styles*/
border: 1px solid black;
min-height: 100px; /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/
width: 100px;
padding: 10px;
}
div.div2 {
flex-grow:1; /* make div grow to fill the space */
margin-bottom:5px; /* minus the amount of margin you wanted */
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
/* remove absolute positioning */
border: 1px solid red;
height: 20px;
width: 20px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
EDIT: I suggest that, if you can focus on the modern browser features, going the flexbox way as shown by Pete is definitely a cleaner approach than the ones I've shown bellow. That being said, here are the alternatives:
You can use calc to dynamically determine the height of div2:
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div1: padding top and bottom */
- 2px /* div1: border top and bottom */
- 20px /* div3: height */
- 2px /* div3: border top and bottom*/
- 5px /* desired separation*/
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
You can avoid including padding and border width in your calculations if you set the box-sizing for your divs to border-box (You might want to set this for all elements):
div {
box-sizing: border-box;
}
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div3: height */
- 5px /* desired separation */
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
There's this rather new, hip CSS property called 'flex' which you're now going to love because it does it exactly that without the need of positioning absolute etc. I did something similar yesterday where I had a vertical nav bar and I wanted one menu at the top and one at the bottom. In a responsive environment; using your approach of positioning absolute it would've resulted in a nasty mess of working out heights to stop the content from overlapping. Flex prevented this! Yeyyyyy
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your example you want to do something like this:
.div1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
.div2 {
align-self: flex-start;
flex-grow:1;
width:100%;
}
.div3 {
align-self: flex-end;
width:100%;
}
Now your div 3 will always be at the bottom. Although now .div3 will extend the entire width so within the div insert your content and BOOM done.
You can use calc on the heightsetting as in my snippet below. That setting is 100% minus (20 + 10 + 2) for the height, border and bottom of the lower DIV minus (5 + 2) for the distance and the border of the first DIV minus 10px for the padding of the parent, summing up to 49px .
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(100% - 49px);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.
Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}
you need to add
overflow: scroll;
to c2's CSS
fiddle
You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}
"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}