Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Positioning: Same width in percent, but one div seems to get smaller

So I have a problem and hope you could help me out here for I am out of ideas:

I try to create a html/css-based bill of fare (I hope it's right... perhaps "menu" is better english? sry, german here), and it worked out fine so far, but there's one little flaw in my css I cant' figure out.

To make things clearer, I created a fiddle over here: [removed, the picture makes it clear :) ]

So in the fiddle you see the "days"-line, which css-class .day have just the same percentual width than my menu-cssclass.

Here's the corresponding css:

.a4 .days td div {
                color: #ffffff;
                font-size: 20px;
                padding: 6px 0 4px;
                text-align: center;
                display: inline-block;
                width: 14.28%;
                border-right: 2px solid white;
                box-sizing: border-box;
                font-family: 'OpenSans_SemiBold';
            }

...and

.a4 .menu-item {
        width: 14.28%;
        float: left;
        vertical-align: top;
        margin-bottom: 5px;
    }

So I thought menus and day-fields would be aligned correctly. But sadly, as seen in the fiddle, the nearer my plan goes "to sunday", the less space is between the menu and the end of the day-rectangle.

I hope someone here could help me out, because after trying to change position: relative to absolute and some other Ideas I am out of Ideas now and clearly in need of help.

edit: here's a screenshot from the comments better describing my problem! actually, I want all fields to look like the "Monday" with the same margin between pictures and end of "monday"-headline (sry for my bad english):

enter image description here

like image 706
getoverit-DE Avatar asked Mar 16 '23 02:03

getoverit-DE


1 Answers

On this line remove colspan="2"

<tr class="content">
    <td class="hspace border-color">              
        <td class="border-color" colspan="2"> <--- here

And the reason is your table rows are of different width, the "days" row is 1174px and the "content" row is 1204px, so 14.28% of that width gives two different values

like image 91
Mindless Avatar answered May 01 '23 19:05

Mindless