CODEWITHSUNDEEP
htmlcss
keanehui
keanehui

Reputation: 195

Meaningless character in css

I'm new to web development and learning how to align elements to vertical centre. This is what I found, but it doesn't work. However if I add some meaningless characters in css, it'll work perfectly fine, including fullstops, comma, etc. I tried on Safari and Chrome and they behaved in the same way. Does these character mean anything?

Original solution:

<head>
    <style>
        #parent {
            position: relative;}
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>

Solution with meaningless character:

<head>
    <style>
        #parent {
            ,
            position: relative;}
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

Upvotes: 1

Views: 149

Answers (4)

Fr&#225;dely Dilon&#233;
Fr&#225;dely Dilon&#233;

Reputation: 321

you should move the #parent instead of the #child

  1. Move the parent box not the child.

  2. #parent{ position: absolute;} is inherinting from <body>

  3. #child {position: relative;} is inheriting from #parent

  4. HAPPY CODE! KEEP IT UP :)

Browser View

#parent {
    border: 10px solid green;
    position: absolute;
    width: 50%;
    top: 50%;
  
}

#child {
    border: 5px solid red;
    position: relative;
}
<div id="parent">
  <div id="child">Content here</div>
</div>

Upvotes: 1

Allen Ryan
Allen Ryan

Reputation: 11

The comma invalidates the CSS style #parent because it's improper syntax. The CSS parser on browsers will just skip over it. It's the same as if you had just

<head>
    <style>
        #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>

Why it works once you remove the #parent style is another matter explained here css - parent's position is absolute and child's position is relative and vice versa

Upvotes: 1

Chamsddine Bouzaine
Chamsddine Bouzaine

Reputation: 1579

it happens Because those characters are breaking the CSS for that element "#parent" it's like it's not there see my example

    #child {
            position: absolute;
            top: 50%;
            height: 30%;
            width: 50%;

        }
<head>
</head>

<body>
    <div id="parent">
        <div id="child">Content here</div>
    </div>
</body>

Upvotes: 2

Ladavi
Ladavi

Reputation: 1

Screenshot

As you can see in my screenshot that character makes position: relative invalid value. I would like to recommand you Developer tools (enter link description here) so you can see css for particular tags when you click on them.

Upvotes: 0

Related Questions