CODEWITHSUNDEEP
htmlcssstyling
Niklas R
Niklas R

Reputation: 16870

parent-element does not scale with styled links

Example @JsFiddle

Why does the grey box wrapping the blue boxes not scale with them? I have tried many different combinations of attributes for the elements, but I cannot get it to work properly.

The effect is not bad actually, but not what I want. An explanation of why this happens would be helpful. Thanks in advance! :)

PS: I am on Mozilla Firefox 15.0.1

enter image description here

Upvotes: 0

Views: 53

Answers (1)

Matt Kieran
Matt Kieran

Reputation: 4220

Your a elements have their display property set to inline. This essentially means that they are treated as text and thus any 'block' type properties applied to them will not work as you would expect them to as you would if it was say, a div.

Learning about the display property is a massive part of CSS, but for this example you want the links to be inline but also a block so you would use:

a { display: inline-block; }

Now the outer div will take into account the size of the inline-block elements whereas before it would not as it was treating your links as if they were just text.

Upvotes: 2

Related Questions