I'm attempting to adjust the margins on the border-right property I added to create a vertical border between two divs. When adjusting these margins in the class that produces the margin, I am affecting the margins of the whole div rather then just the border.
I've attempted to add a pseudo-class that would only affect the border but it has no affect to the border display.
How can I affect the margins of just the border?
.border {
border-right: 3px solid
}
.border:after {
margin-left: 30px
}
.width {
width: 20%;
}
<div class='width border'>
<p> hello </p>
</div>
I would approach this using a background-color in the pseudo-class to mimic a border. By making the :after content an absolutely positioned element of the now relative parent, .mydiv, we can pin the new "border" to be 30px away from the right edge of the parent, whatever its width may be.
.mydiv {
position: relative;
width: 20%;
}
.border:after {
margin-left: 30px;
content: '';
position: absolute;
top: 0;
right: -30px;
width: 3px;
height: 100%;
background-color: black;
}
<div class='width border mydiv'>
<p> hello </p>
</div>
Related
enter image description here
I have a class with position relative and trying to set the position of its tag to absolute. As soon as i set the position to absolute, everything in my site would disappear.here is CSS
.container {
display: flex;
width: 90vh; */I didnt have this line in my code first
}
.panel {
position:relative;
}
.panel h3{
position:absoloute;
bottom: 5px;
left: 5px;
}
Parent(panel) could not have sensible height based on child elements that are all absolute positioned. In your case, height of panel will be 0 because there is no child elements that are positioned neither absolute or fixed.
Not sure why you are trying to position bottom: 5px, left: 5px.
If you just want 5px space from bottom, left then you can use padding.
.panel {
padding-bottom: 5px;
padding-left: 5px;
}
Else if you want positioned layout, then parent(.panel) should have sensible height manually via css.
.panel {
position:relative;
height: 50px;
/* if not set width manually, default is 100% */
}
.panel h3{
position: absolute;
bottom: 5px;
left: 5px;
}
else if you want content height based on background image and position h3 tag, you should insert img tag instead of background.
.panel {
position: relative;
}
.panel img {
/* if you will need to adjust width and height, you can enter here */
/* width: 100%;*/
/* height: 200px;*/
/* object-fit: cover*/
}
.panel h3 {
position: absolute;
left: 5px;
bottom: 5px;
}
<div class="container">
<div class="panel active">
<img src="https://i.stack.imgur.com/wSCfr.png"/>
<h3>This is image 1</h3>
</div>
</div>
Hope it will be help for you.
I'm filling a parent div with dynamically generated child divs. I'd like for the child divs to be bound by the parent (so they can't expand the parent's shape horizontally as they fill with content). At the same time, I'd like for the child div borders to sit on top of the parent div borders, as well as each others. I threw together a diagram to better explain:
What is the best way to accomplish this via CSS? I've looked around, and I can't seem to find a solution that both stacks the borders, but also keeps the child divs restricted by the parent div (on the x axis).
Overlapping borders are always a little tricky. In your case, I wouldn't recommend working with absolute positions and z-indexes – this will only make things more complicated and you won't be able to rely on the native behaviour of block elements anymore.
Let's say your HTML looks like this:
<div class="parent">
<div class="child yellow"></div>
<div class="child blue"></div>
<div class="child red"></div>
</div>
You can achieve the illusion of overlapping children by only applying a top border to the :first-child. Even if you add more divs dynamically to the top, the first one will always be the one that appears to be "on top":
.child {
border-style: solid;
border-width: 0 2px 2px 2px;
background: white;
}
.child:first-child {
border-top-width: 2px;
}
.yellow {
border-color: yellow;
}
.blue {
border-color: blue;
}
.red {
border-color: red;
}
The parent needs a little hack, because if you added a regular border around it, it would be displayed around the children.
.parent {
width: 500px; /* or any other width */
height: 100vh; /* or any other fixed height */
overflow-y: auto; /* make scrollable */
box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
}
The inset box-shadow creates the illusion of solid border on the inside of the parent. To make sure it's not visible underneath the children borders (box-shadows tend to be slightly blurrier than borders), you need to make sure the children have a background colour.
Edit: Here's a demo.
You can influence the stack order in css with z-index but you need to use a position:absolute or position:fixed on these elements.
.div1 {
width: 200px;
height: 100px
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.div2 {
width: 200px;
height: 100px
position: absolute;
top: 190px;
left: 0;
z-index: 2
}
That css should display the .div2 10px overlapping the .div1
If the height is dynamic you can either add it by JS or add on div as child in the next.
Note that each "position" attribute relates to the recent parent position relative or absolute!
If I understand you right, you could place the border of the parent using :after and position absolute, with z-index:-1:
.parent { position: relative; }
.parent:after {
content: '';
position: absolute;
z-index: -1;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
}
and for the children, you could remove the top border if not the :
first:
.child:not(:first-child) {
border-top: 0;
}
you can also try this one. Define two different classes. "Border" class for border width and style. And a color class. Like this:
<style>
.border {
border: 5px solid;
}
.green {
border-color: green;
border-top-width: 0px;
}
.yellow {
border-color: yellow;
}
/*I do not use a border-top-width to remowe top because this is the first div.*/
.red {
border-color: red;
border-top-width: 0px;
}
</style>
<div class="container">
<div class="border yellow">yellow</div>
<div class="border green">green</div>
<div class="border red">black</div>
</div>
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
Is it possible to make multiple absolute-positioned divs overlap multiple relative-positioned divs in IE6 & IE7?
See this jsFiddle for more information: http://jsfiddle.net/btker/1/
HTML
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
CSS
.wrapper{
height: 100%;
width: 100%;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 100;
}
There are two relative <div>s (placed in identical wrappers) containing each one a absolute <div> that overlap all the relative <div>s. This works great without any problems in updated versions of Chrome, Firefox etc, the absolute <div> with z-index is always placed on top.
In IE6 and IE7 this is not working. The different between this problem and the standard "dropdown in header display its menus behind the page content" is that in those situations its often fixed by give the parent element of that specific menu other z-index etc. In this case the both absolute <div>s are put in identical <div>s.
Can this be solved so the absolute <div>s are always on top of all relative <div>s in IE6 & IE7? Conditional comments for IE can be used to make the solution cross-browser.
It is possible but only by decreasing the z-index of the second .wrapper or increasing the z-index of the first .wrapper.
On a simple level, each positioned element with a non-auto z-index creates a new stacking context, although there are other circumstances in which a new stacking context is created - see The stacking context.
The problem is one that affects IE <= 7, from quirksmode.org
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
CSS
.wrapper{
height: 100%;
width: 100%;
}
.lower {
position: relative;
z-index: -1;
}
.higher {
position: relative;
z-index: 2;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 1;
}
HTML
<div class="wrapper"> <!-- add higher class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper"> <!-- or add lower class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
i want to limit the border length applied to a div element(or any HTML elements) . For example consider a div of width 100px, is there anyway to apply the border to only 40px width itself?
You will need to use a child div of the appropriate width to do that. For example:
<div id="outer">
<div id="border"></div>
<p>...</p>
</div>
with:
#outer { width: 100px; padding-top: 0; }
#border { width: 40px; border-top: 1px solid black; margin-top: 0; }
You need to use a nested div or a narrow image as background.
Try not to add a div only to display the border, always try to be semantic. Probably your design need a supplementary section.
Instead of adding another <div> you can simply use a the pseudo selector :before and :after:
div {
position: relative;
}
div:before {
position: absolute;
content:'';
height: 1px;
width: 40%;
background-color: black;
}
here is the fiddle.