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.
Related
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>
I have the following
div {
border: 1px solid red;
}
input {
font-size: 10vw;
width:50%;
}
button {
height: 100%;
width: 40%;
}
<div>
<input/><button>button</button>
</div>
The border is just to show the div. The input has a variable size. I've demonstrated this by using 10vw as the font size.
I would like the button to be the same height as input.
I would like the div to stay in the main flow of the page (i think that may rule out using absolute positioning tricks?) and I want the solution to be CSS only.
I'd prefer not to have to work out the size of the input - is there anyway I can get the button to fill the height of the containing div?
Sure, just add position:relative to the div and position:absolute to the button:
div {
border: 1px solid red;
position: relative;
}
input {
font-size: 10vw;
width: 50%;
}
button {
height: 100%;
width: 40%;
position: absolute;
}
<div>
<input/>
<button>button</button>
</div>
Drawing a vertical line with border-left and border-right seems easy.
But in my case I am having a single div and I need to draw a vertical line at the given pixel
say (240px).
How can I achieve this?
You may use the :after or :before pseudo element for this, and position it absolute at 240px.
Example: http://jsfiddle.net/abhitalks/YMS4F/1/
CSS:
div.split {
position: relative;
height: 20px;
width: 400px;
border: 1px solid black;
}
div.split:after {
content: "";
display: block;
width: 1px;
height: 20px;
border-left: 1px solid gray;
position: absolute;
top: 0px;
left: 240px;
}
Taken, width and height in pixels for demo purpose. Hope you get the idea.
Easiest way is to create another div within the main div and give that border-left/border-right and then you can scale the inner div to what you want and also higher or lower it.
Just edit the code to suit your needs
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
height:300px;
width:300px;
background:silver;
}
.child {
position:relative;
height:200px;
width:1px;
background:red;
top:100px;
}
http://jsfiddle.net/7Qj2d/
Well I have such simple divs structure:
<div id="wrapper">
<div id="1" class="block">
1
</div>
<div id="2" class="block">
2
</div>
</div>
JS Fiddle
Content of #1 can dynamically changed by javascript and its height can be changed depended of content. What I want is to make #2 the same height as #1. I understand that I can use javascript for this purpose but I suggest there must be some not such tricky way to make those divs' heights equal using only CSS and/or changing divs' positioning some how.
To expand on my comment, you can't do it semantically. You have to use a little trick to fake the 100% height. It's called faux columns, and you can read more here.
In your case, we can fake it by adding a few background divs:
<div class="background bg1"></div>
<div class="background bg2"></div>
Then changing your CSS like so:
#wrapper {
border: 1px solid black;
position: relative;
}
#wrapper:after {
display: block;
content: " ";
height: 0;
clear: both;
}
.block {
position: relative;
float: left;
vertical-align: top;
width: 200px;
text-align: left;
min-height: 200px;
padding-left: 20px;
z-index: 2;
}
.background {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
z-index: 1;
}
.bg1 {
background-color: #eee;
}
.bg2 {
left: 200px;
background-color: #aaa;
}
Here's a working jsFiddle.
The jQuery Way: Use .height() to return the height of Div1 and then simply use .css() to set Div2 to Div1's height. When div one changes, you can use the resize event to trigger a function that would change div2's height.
The CSS way: Christian Varga's answer seems to work perfectly.
I'd like an element to have relative positioning. But I don't want its child element (with position:absolute) to have relative width to the parent.
For example: http://jsfiddle.net/t2yJP/. I'd like the second body>div to have position:relative, but have its child's width maintain the same behavior.
Try adding width:inherit to the .abs class.
How about this jsFiddle.
But you should really rethink your strategy. In your fiddle, your second example only works because the parent div is not positioned and therefore, the .abs div is technically not in the parent.
Normally, child elements are inside their parents. That's what containers are for! So if you don't want the .abs div to be constrained by the red rectangle, don't put it inside the red rectangle.
I was able to achieve a similar-looking effect as follows:
<div class='abs pad'>
Content content content
</div>
<div class='rel pad red'>
</div>
.rel {
position: relative;
}
.abs {
position: absolute;
z-index: 1;
}
.pad {
padding: 2px;
margin: 2px;
}
.red {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: red;
}