I have two div, one on the left and the other is on the right. Now I want to divide this two div with a border between them. But the border with full height looks bad.
I want to control the height of the border. How could I do this?
A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies. If all you need is a vertical divider, you could use:
<div id="left">
content
</div>
<span class="divider"></span>
<div id="right">
content
</div>
With css:
span {
display: inline-block;
width: 0;
height: 1em;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Demo at JS Fiddle, adjust the height of the span.container to adjust the border 'height'.
Or, to use pseudo-elements (::before or ::after), given the following HTML:
<div id="left">content</div>
<div id="right">content</div>
The following CSS adds a pseudo-element before any div element that's the adjacent sibling of another div element:
div {
display: inline-block;
position: relative;
}
div + div {
padding-left: 0.3em;
}
div + div::before {
content: '';
border-left: 2px solid #000;
position: absolute;
height: 50%;
left: 0;
top: 25%;
}
JS Fiddle demo.
Only using line-height
line-height: 10px;
I want to control the height of the border. How could I do this?
You can't. CSS borders will always span across the full height / width of the element.
One workaround idea would be to use absolute positioning (which can accept percent values) to place the border-carrying element inside one of the two divs. For that, you would have to make the element position: relative.
not bad .. but try this one ... (should works for all but ist just -webkit included)
<br>
<input type="text" style="
background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">
//Feel free to edit and add all other browser..
I was just looking for this... By using David's answer, I used a span and gave it some padding (height won't work + top margin issue)... Works like a charm;
See fiddle
<ul>
<li>Home</li><span class="divider"></span>
<li>About Us</li><span class="divider"></span>
<li>Events</li><span class="divider"></span>
<li>Forum</li><span class="divider"></span>
<li>Contact</li>
</ul>
.divider {
border-left: 1px solid #8e1537;
padding: 29px 0 24px 0;
}
You could create an image of whatever height you wish, and then position that with the CSS background(-position) property like:
#somid { background: url(path/to/img.png) no-repeat center top;
Instead of center topyou can also use pixel or % like 50% 100px.
http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
Related
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
Is there any way I can only add margin to the border ?
Only border should have margin not the text.
I am trying to move border not the text field. Border need to be shrinked/moved not text.
CSS :
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
}
HTML :
<div class="margin-check">
Something I am typing for checking the border margin
</div>
JS Fiddle:
https://jsfiddle.net/c91xhz5e/
You can use pseudo-element and then you can change size of border
.margin-check {
display: inline-block;
position: relative;
}
.margin-check:after {
position: absolute;
content: '';
border-bottom: 1px solid #d2d7da;
width: 70%;
transform: translateX(-50%);
bottom: -15px;
left: 50%;
}
<div class="margin-check">
Something I am typing for checking the border margin
</div>
In general the margin is from the content which in this case is your text. You have to use box sizing property to set the margin from you border.
* {box-sizing:border-box;}
This way the margin for all your elements will be from the border box and not the content box
In your case, where you have no borders left and right, you can simply adjust the line-height.
.margin-check {
line-height:2em;
}
You can use text-indent.
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
text-indent: 15px;
}
<div class="margin-check">
Something I am typing for checking the border margin
</div>
A common problem I encounter is that I want to make an element have a border on hover, but when the border comes in the element's computed height and width increase, making it visually jump and sometimes push elements. Is there a way to cure this without using max-width and max-height?
Fiddle: https://jsfiddle.net/xdzm9yfu/
<style>
#mydiv { background: yellow; padding: 15px; border: 0; }
#mydiv:hover { border: 1px solid black; }
</style>
<div id="mydiv">
<p>Here's an element. Watch the text jump when the border appears.</p>
</div>
The easiest way to achieve this is to apply a transparent border by default:
<style>
#mydiv {
background: yellow;
padding: 15px; border: 0;
border: 1px solid rgba(0,0,0,0);
}
#mydiv:hover { border: 1px solid black; }
</style>
Instead of having no border when it's not being hovered, how about giving it a transparent 1px border? That way, it'll always have the same spacing, just a different color on hover.
<style>
#mydiv { background: yellow; padding: 15px; border: 1px solid transparent; }
#mydiv:hover { border-color: black; }
</style>
<div id="mydiv">
<p>Here's an element. Watch the text jump when the border appears.</p>
</div>
I think you need to add box-sizing: border-box; into your CSS for #mydiv. That means that the padding and borders are included in the elements height and widht, not in addition to.
Or.. set your border to yellow to match the content div background colour.
use box-sizing:border-box to make your width and height include your border
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
border-box - The width and height properties (and min/max properties) includes content, padding and border, but not the margin
I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:
table td {
border-right:1px solid #000;
}
It works fine but the problem is that the border's height takes the total TD's height.
Is there a way to set the height of the border?
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.
For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.
Here is a working example of both:
http://jsfiddle.net/byronj/gLcqu6mg/
An example with list items:
li {
list-style: none;
padding: 0 10px;
display: inline-block;
border-right: 1px solid #000;
line-height: 5px;
margin: 20px 0;
}
<ul>
<li>cats</li>
<li>dogs</li>
<li>birds</li>
<li>swine!</li>
</ul>
Building on top of #ReBa's answer above, this custom-border class is what worked for me.
Mods:
working with border instead of backaground-color since background-color is not consistent.
Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.
ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
padding: 10px;
}
.custom-border {
position: relative;
}
.custom-border:after {
content: " ";
position: absolute;
border-left: 1px #6c757d solid;
top: 35%;
right: 0;
height: 30%;
margin-top: auto;
margin-bottom: auto;
}
<ul>
<li class="custom-border">
Hello
</li>
<li class="custom-border">
World
</li>
<li class="custom-border">
Foo
</li>
<li class="custom-border">Bar</li>
<li class="custom-border">Baz</li>
</ul>
Good Luck...
No, you cannot set the border height.
This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.
table td {
border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
Just like everyone else said, you can't control border height.
But there are workarounds, here's what I do:
table {
position: relative;
}
table::before { /* ::after works too */
content: "";
position: absolute;
right: 0; /* Change direction for a different side*/
z-index: 100;
width: 3px; /* Thickness */
height: 10px;
background: #555; /* Color */
}
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border.
Remember, inherit has no effect when the table height isn't set.
Use height: 50% for half a border.
Demo
table {
border-spacing: 10px 0px;
}
.rightborder {
border-right: 1px solid #fff;
}
Then with your code you can:
<td class="rightborder">whatever</td>
Hope that helps!
Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.
.main-box{
border: solid 10px;
}
.sub-box{
border-right: 1px solid;
}
//draws a line on right side of the box.
later add a margin-top and margin-bottom.
i.e.,
.sub-box{
border-right: 1px solid;
margin-top: 10px;;
margin-bottom: 10px;
}
This might help in drawing a line on the right-side of the box with a gap on top and bottom.
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.
I have two divs placed inside a larger div. Each one of these two divs contains dynamically generated content and thus their heights vary, so I cannot know which one of the two will be taller. The parent div they are placed in has a 1px border and I would like to have 1px line between these divs as well, so that the line extends all the way down to the bottom of the parent div which adjusts itself based on the heights of the child divs. This is much easier to understand in the following picture:
I have tried setting the child divs to a height of 100%, but that does not seem to be working. How can I accomplish this effect? (This also needs to work in IE6)
Well, this is relatively easy, if all you want is a single border extending to the full height of the tallest element (in this case the tallest div), albeit my solution doesn't really address the potential equal heights issue (if you wanted the background-color of each div to extend to the full-height of the tallest element. It does, though, satisfy your request for the full-height single border:
#left,
#right {
width: 40%; /* adjust to taste */
float: left;
padding: 1em; /* adjust to taste */
}
#left {
border-right: 4px solid #000; /* adjust to taste */
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
JS Bin Demo.
Edited to address my misunderstanding/mis-reading of the question.
This approach is kind of a hack, but is achievable using the same mark-up as in the previous demo, but more complex CSS:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
#right p,
#left p {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0;
padding: 0 0.5em 1em 0.5em;
}
#right p:first-child,
#left p:first-child {
padding-top 1em;
border-top: 1px solid #ccc;
}
#right p:last-child,
#left p:last-child {
border-bottom: 1px solid #ccc;
}
Demo at JS Bin.
This won't be cross-browser friendly, though, IE (for certain) is likely to have problems with, at least, the :last-child pseudo-selector, so a JavaScript solution might be better for you in this instance. Although there is a more simple option to wrap the inner divs (in this case the #left and #right divs) in another div:
<div id="wrap">
<div id="left">
<div class="innerWrap">
<!-- content -->
</div>
</div>
<div id="right">
<div class="innerWrap">
<!-- content -->
</div>
</div>
</div>
Which can be used with the css:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
div.innerWrap {
border: 1px solid #000;
}
Demo at JS Bin
But, while that's more cross-browser friendly, it does start a descent into the madness that is divitis.
try div {overflow:auto } where DIV is the container. or you can use the clearing DIV which you have to add after DIV 2 and before the main DIV .clear { clear:both }
EDIT: I overlooked - you wanted the DIVs to be set at equal height? That's not gonna happen due to the fact that it's a free flow document. You will need to use Javascript where it can look at the tallest DIV and set other DIV to match that height.
http://www.kensfi.com/set-a-div-height-equal-with-of-another-div/
considering you want this to degrade nicely all the way back to IE 6 have you considered a 3-column table with the center column with width of 1px band background-color of your divider color? outside olumns being the containers of your DIVs
I'm partial to JS in this case. If you assign an id to each div, then at the end of the loading of content call something like this (this is NOT REAL CODE):
if (get(div1).offsetHeight > get(div2).offsetHeight( {
div1.borderRight = 1px;
else
div2.borderLeft = 1px;
Oh...I may have misread that. If you want the divider to stretch the entire parent div, then set div1.style.height to divParent.clientHeight and add the border to it.