CODEWITHSUNDEEP
htmlcss
user5099484
user5099484

Reputation:

Strange Table width behavior in CSS

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.

Upvotes: 0

Views: 229

Answers (2)

user5099484
user5099484

Reputation:

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).

Upvotes: 0

tpsaitwal
tpsaitwal

Reputation: 422

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.

Upvotes: 1

Related Questions