CODEWITHSUNDEEP
htmlcsscss-position
getoverit-DE
getoverit-DE

Reputation: 161

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

Upvotes: 4

Views: 387

Answers (2)

Mindless
Mindless

Reputation: 2357

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

Upvotes: 7

kingkapd
kingkapd

Reputation: 69

I'm not sure if i understand your problem correctly but i think this might help.

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/static/flat/css3-modsel-33.html

Use the last class to target the Sunday and give it a bigger margin? If that is what you want.

I hope this helps!

Upvotes: 0

Related Questions