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):
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With