I'm often creating a two (or more) column layout with HTML / CSS and need a separating border. I usually add the border to either the left or the right column, but I need the border, to match the height of the highest column.
I've created a jsFiddle to illustrate this problem: http://jsfiddle.net/rxGUS/
Thanks in advance.
How about giving both a border, but having one with a negative margin equal to the border width so they overlap;
.column1 {
float:left;
width:200px;
padding:5px;
border-right:1px solid #000;
}
.column2 {
float:left;
width:200px;
padding:5px;
margin-left:-1px;
border-left:1px solid #000;
}
http://jsfiddle.net/alexk/rxGUS/9/
Adjusted from Alex's answer to take into account CSS from Twitter Bootstrap. Since the spacing between the two columns is supposed to be 20px (from margin-left:20px;), I added set it to 10px on each side of the border. If you want 20px, simply set the padding-left for .column2 and the padding-right for .column1 to 20px.
.column1, .column2 {
float:left;
width: 200px;
}
.column2 {
margin-left:-1px;
border-left:1px solid #000;
padding-left:10px;
}
.column1 {
border-right: 1px solid #000;
padding-right:10px;
}
See the jsFiddle example with Twitter Bootstrap included.
You can do this a few ways. The easiest: Create a background image to replace the css border and apply it to the container which should match the height of the tallest column. This isn't very flexible though.
Secondly, use javascript: Create a variable, maxHeight, set it to 0, then loop through each column returning the height of that column. If it is taller than maxHeight then set maxHeight to that value. Once the loop is over, set all columns to the value of maxHeight.
There are quite a lot of resources for this on Google. Especially jQuery solutions.
Hope that helps :)
There's not really an easy way to do this with pure CSS, but there's a jQuery plugin called EqualHeights that can achieve the effect you want. Basically, you tell it which elements you want to apply it to (.column1, .column2 in your case), and it will dynamically set their heights to the same value (based on whichever one is taller).
You could play around with display: table-cell but it is not compatible with IE less than 8. Here's an example on jsFiddle. It uses a CSS3 selector for the borders in between but you can mess around with that to figure out how you want it to work.
Related
I am trying to integrate the box-sizing but seems not working. any one help me to understand the issue here..
Live Demo
a{
display:inline-block;
background:#fff;
border:1px solid #ccc;
box-sizing:border-box;
padding:1rem;
}
a.active{
border:0;
background:orange;
}
<a class="active" href="#">EN</a>FR
There are two main problems in the code: first, as #Daniel pointed out in his answer, the dimensions of the element must be made explicit so as to prevent automatic resizing. Additionally, as noted in this answer, inline-block elements conflict with border-box sizing, but there are several workarounds.
For one, the CSS attribute overflow: hidden can also be added to the element in question. Alternatively, it is possible to use vertical-align: top to ensure all elements have the same baseline. A functional example can be seen below, with a larger border for emphasis:
a{
display:inline-block;
background:#fff;
border:10px solid #ccc;
box-sizing:border-box;
width:5em;
height:5em;
overflow:hidden;
padding:1rem;
}
a.active{
border:0;
background:orange;
}
<a class="active" href="#">EN</a>FR
You need to explicitly set the value of the dimension that you want the browser to use the border-box calculation for.
As per the spec in reference to the border-box value:
The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified
. As the content width and height cannot be
negative, this computation is floored at zero.
So set the width and/or height property for your a elements and then the padding/border will be subtracted from this.
box-sizing: border-box; values for elements without specified width or height dimensions are ignored.
a{
display: inline-block;
background: #fff;
border:1px solid #ccc;
box-sizing: border-box;
padding:1rem;
}
a.active{
border: 1px solid transparent;
background: orange;
}
<a class="active" href="#">EN</a>FR
I've run into the same issue and think I've found much simpler solution. Instead of removing the border completely just change its color for transparent. That way it is still there even though it's not visible. Thanks to that text inside anchor tag won't jump here and forth.
I did a search here but I found just info about adjacent borders. Does anybody know if it is possible to add borders to all divs just to see how the current layout works.
If you just add a 1px border, it will add 2px to the width (side by side) and will - sometimes - break the current layout.
I need this just for control purposes, something to turn on/off, not for production.
thanks!
You can better use outline property instead of border, because
Outlines do not take up space, because they always placed on top of
the box of the element which may cause them to overlap other elements
on the page.
Unlike borders, outlines won't allow us to set each edge to a
different width, or set different colors and styles for each edge.
An outline is the same on all sides.
Outlines don't have any impact on surrounding elements apart from
overlapping.
Unlike borders, outlines don't change the size or position of the
element.
.outline-outer,.border-outer{
height:100px;
width:100px;
border:solid 1px blue;
}
.border{
height:80px;
width:50px;
border:solid 1px red;
float:left;
}
.outline{
height:80px;
width:50px;
outline:solid 1px red;
float:left;
}
<div class="outline-outer">
<div class="outline"></div>
<div class="outline"></div>Outlined
</div>
<br/><br/><br/>
<div class="border-outer">
<div class="border"></div>
<div class="border"></div>Bordered
</div>
Fiddle Here
* {
border:1px solid red;
box-sizing: border-box;
}
This will add a border to all divs inside ur layout.
* means global.
You should use the box-sizing property which
Specify elements that elements should have padding and border included in the element's total width and height. so no effect on the layout
* {
border: 1px solid blue;
box-sizing: border-box;
}
I have the following set up
http://codepen.io/anon/pen/WQoqrz
The placeholder (Gray image) represents a national flag. Flags have varying proportions so I set the height to be 100% and the width to auto, then I have the next element in the row (a table) take the remaining (dynamic) width of the row.
This is the strange part:
.player-card td, .player-card th{
/*width can be any value 1-13%*/
width:13%;
height:19px;
vertical-align:middle;
text-align:center;
border:2px solid #FFD200;
vertical-align:middle;
}
For some reason if the width is set to any value greater than 13% the table will not take up the remaining width. There are four example divs. Can anybody explain what is happening here?
I apologize for the confusing magic numbers and border set up that's happening. The strange colors and apparent missing pieces are a result of ripping this out of my files.
This is happening because the css which you have written for all the things at start.
Just remove table from that, and for table write css for that like
table{
padding:1px;
}
Padding you can write whatever value you want.
Now its is working fine for me. I think it should solve your problem.
I've come up with a solution. Here's a fiddle based off another similar question's fiddle.
http://jsfiddle.net/ux4L4n74/
div.something { float: left; height: 30px; }
div.fill {
font-size:0px;
height: 30px;
float: none;
overflow: hidden;
background: #390; }
.fiddy{
font-size:12px;
display:inline-block;
width:50%;
height:10px;
background:blue;
text-align:center;
}
Abandon the table. The css is still very sensitive and less clear than I hoped.
The font-size:0 just lets fiddy's 50% width inline-blocks split as expected (the alternative is to remove whitespace in the html).
I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(
please suggest.
Here's what you want, tested and working :)
http://jsfiddle.net/4FWWp/
HTML
<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>
CSS
#first{
background-color:red;
float:left;
}
#second{
background-color:blue;
float:left;
margin-top:52px;
}
Take a look:
http://jsfiddle.net/Dc99N/
.d {
display: inline-block;
border:2px solid;
width: 200px;
height: 200px;
}
.sm {
margin-top: 50px;
height: 150px;
}
Took a quick stab at it and it seems possible.
What you need to is display inline-block on the divs and set the height of the divs as percentages.
Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/
The grey background is of the parent div.
Flex-box could be the best and easier solution.
IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.
Please, look at Flexible Box Layout Module
i use this code
<div class="main">
<div class="babyOne">
</div>
<div class="babyTwo">
</div>
</div>
.main{
width:100%;
position:relative;
}
.babyOne,.badyTwo{
width:50%;
float:left;
}
with this CSS above everything works fine.
but as soon as i give padding to inner divs all the ui breaks,
.babyOne,.badyTwo{
width:50%;
float:left;
padding:5px;
}
and fire bug shows the increase in the width of divs equal to padding.
According to padding property this should not happen.
any idea how to prevent this?
First of all you need to learn CSS box-model
This states that whatever padding, border, margin you add to you element does count outside it, so for example the element is of 200px width and 100px height, if you add padding say 5px than the width and height will be 205px and 105px respectively, so inorder to workaround with this you need to use CSS3 box-sizing property, but as still it is CSS3 property and if IE is the main thing you want to supprt, I suggest you to resize the elements according to your needs
So for example a div with these styles
div {
height: 100px;
width: 200px;
padding: 5px;
}
You can re-size the above as
div {
height: 95px;
width: 195px;
padding: 5px;
}
CSS3 box-sizing Reference
The WRAPPER must have fixed size: http://jsfiddle.net/esVgH/1 example:
.main{
width:200px;
position:relative;
}
Another solution is display the .baby as a table cell:
.babyOne, .badyTwo {
display: table-cell;
}
Your problem is the expected behaviour.You set a width and then you say give it some padding.So the width plus the padding is going to be greater than the original width.
You can try CSS3s box-sizing attribute: http://www.quirksmode.org/css/box.html
I'm not sure how widely supported it is though.
There's also a host of SO answers here: How apply padding in HTML without increasing the div size?
.babyOne,.badyTwo{
width:45%; /* As you have like based on padding */
float:left;
padding:5px;
}