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).
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'm trying to understand how to change a small thing in a website, but I can't figure out how to do it.
I have a grid of articles organized in two columns, and I would like the various blocks to be separated avoiding the blank space as in figure http://i.stack.imgur.com/tNCFd.png
But I don't know which kind of properties I should set.
EDIT - Clarified answer (to clarified question in comments)
There's a rule in the parent theme:
#content .post { margin-bottom: 12px; }
You need to override this rule in your child theme and set
#content > div.articolo .post { margin-bottom:0; }
ORIGINAL ANSWER
First off, I strongly suggest that you don't just throw a heavy jQuery library (i.e. masonry) at a project that can be fixed with simple CSS.
Secondly, from the code in your comments - which is this:
#content div.articolo { display:inline-block; clear:none; min-height: 10px; }
#content > div.articolo:nth-child(even) { width:48%; float:left; clear:both; }
#content > div.articolo:nth-child(odd) { width:48%; float:right; }
#content > div.articolo:first-child { width:100%; float:none; clear:both; }
You should change it to this:
#content div.articolo { display:block; clear:none; min-height: 10px; }
#content > div.articolo:nth-child(even) { width:50%; float:left; clear:both; }
#content > div.articolo:nth-child(odd) { width:50%; float:right; }
#content > div.articolo:first-child { width:100%; float:none; clear:both; }
Note the only things that I changed were the width (changed to 50%) and I changed display: inline-block to display: block
display: inline-block preserves whitespace (converts many to one) in the markup, so if you have a space in your markup after a closing div that is display: inline-block, you'll see a space in your browser. Chances are, that is why the developer set the widths to 48%, to (poorly) account for the fact that there was a space appearing after each article block (because it was display: inline-block) meaning that each block couldn't be set to 50% width, because then they wouldn't appear next to each other (because 50% + 50% + a space > 100%)
Try setting the height of each article to 'auto' with suitable margin-bottom. You'll still get some space below where two articles height are less than the corresponding articles in the other column.
Look at the item columns on http://www.ebuyer.com/ - this illustrates the effect.
Pretty difficult to say from just an image. If the margin is in the html elements, you can try to set margin and padding to 0px; if the whitespace is in the bitmaps, crop them.
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;
}
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.