0

Can anybody tell me why class "Login2" is going out of the parent "login" I'm using 

#login2 { width:100%; height:100%; background-color:#e8eceb; }

Full code demo

Improve this question
3
  • 1
    The reason is because your getting 100% of the parents height but have the text before it... so its being pushed down. Commented Dec 19, 2014 at 14:37
  • 1
    youv'e used relative sizing, and it's relative to the parent. so #login2 is taking 100% of #login1's size, which DOESN"T take into account that you've got that "Login to admin panel" taking up space. Commented Dec 19, 2014 at 14:38
  • 1
    Why not just put the title in its own div? Demo. I don't see the point of having login2 Commented Dec 19, 2014 at 14:42

6 Answers 6

Reset to default
2

Can anybody tell me why class "Login2" is going out of the parent "login"

The Problem

Both your #login and #login2 elements have a computed height of 300px. What you're doing here is neglecting to include the "Login to Admin Panel" text which exists alongside your #login2 element within the #login element.

This text itself has a computed height of 23px (in Chrome). This means already the #login2 element is pushed down by 23px. On top of that, our #login2 element also has a margin-top property set to 5px, meaning in total our #login2 element is pushed down by 28px. Because of this, the distance from the top of #login to the bottom of #login2 is 328px - not the 300px we're looking for.

A Solution

An easy way to fix this is to simply wrap your "Login to Admin Panel" text in its own element which has its own fixed height defined; then account for both that element's height and the margin-top in our #login2 element's height:

body{ background-color: #bdd7d1; } #container { width: 320px; height: 300px; background-color: #d0e1dd; border: 1px solid white; padding:10px; margin-left:auto; margin-right:auto; } #login { width: 100%; height: 100%; text-align: center; font-variant: small-caps; font-size: 20px; background-color: #404040; border: 1px solid #404040; color: white; } #login2 { margin-top:5px; width:100%; height:270px; background-color:#e8eceb; } #login p { height: 25px; line-height: 25px; margin: 0; }
<div id="container"> <div id="login"> <p>Login to Admin Panel</p> <div id="login2"> <div id="buttonPlace"> </div> </div> </div> </div>

What I've done in this code snippet is wrap your "Login to Admin Panel" text within <p> tags, and styled that to set its height and line-height to 25px, and remove any margins on it which the browser may add itself. I've then done a bit of maths to work out what height the #login2 element needs to be to make it fit perfectly:

h = Height of #login element m = Top margin of #login2 element p = Height of newly-added p element d = Required height h - m - p = d 300px - 25px - 5px = 270px
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You have to change:

height:100%;

to:

height:auto;

Jsfiddle demo: http://jsfiddle.net/sr7kr3gz/13/

Improve this answer

5 Comments

So this is the only option?I want fill whole login2
I don't think it is there are many ways to fix this but this is the easiest fix with your code.
@Stefan There are a few ways to fix this.
@ArturK. What do you exactly mean with "fill" whole login2?
If I use height:auto; I need to fill the div with some stuff to see the color of the div
0

It's caused by two things:

  • First the margin-top value and second the size of the Text Login to Admin Panel

What you can do is assign a wrapper to the title and set a fixed height:

<div class="title">Login to Admin Panel</div> #login .title { height:20px; line-height:20px; }

Then use calc to set the right height of the panel:

#login2 { width:100%; height:calc(100% - 20px); background-color:#e8eceb; }

UpdatedFiddle

Improve this answer

Comments

0

Try putting overflow: hidden on the parent #login. Something like this maybe what you want:

body { background-color: #bdd7d1; } #container { width: 320px; height: 300px; background-color: #d0e1dd; border: 1px solid white; padding: 10px; margin-left: auto; margin-right: auto; } #login { width: 100%; height: 100%; text-align: center; font-variant: small-caps; font-size: 20px; background-color: #404040; border: 1px solid #404040; color: white; overflow: hidden; } #login2 { margin-top: 5px; width: 100%; height: 100%; background-color: #e8eceb; }
<body> <div id="container"> <div id="login">Login to Admin Panel <div id="login2"> <div id="buttonPlace"></div> </div> </div> </div> </body>

Improve this answer

Comments

0

For your case i would color only the headline itself and let the #login2 auto-scale in height, due it is relative to the parent DIV #login:

HTML:

<div id="container"> <div id="login"> <span class="hl">Login to Admin Panel</span> <div id="login2"> <div id="buttonPlace"></div> </div> </div> </div>

CSS:

#login { width: 100%; height: 100%; text-align: center; font-variant: small-caps; font-size: 20px; background-color: #e8eceb; border: 1px solid #404040; color: white; } #login2 { margin-top:5px; } #container .hl { display: block; background: #404040; }

Fiddle: http://jsfiddle.net/sr7kr3gz/19/

Improve this answer

Comments

0

I would suggest reducing your number of elements by making use of the :before and/or :after css pseudo elements, removing the need for the #login2 element altogether.

LIVE DEMO

In order to make the form aesthetically pleasing, i've removed your #login2 and replaced it with a pseudo element :after.

body { background-color: #bdd7d1; } #container { width: 320px; height: 300px; background-color: #d0e1dd; border: 1px solid white; padding:10px; margin-left:auto; margin-right:auto; } #login { width: 100%; height: 100%; position:relative; text-align: center; font-variant: small-caps; font-size: 20px; background-color: #404040; border: 1px solid #404040; color: white; overflow:hidden; } #login:after { content:""; position:absolute; margin-top:5px; width:100%; height: calc(100%); background-color:#e8eceb; left:0; top:22px; }
<div id="container"> <div id="login">Login to Admin Panel <div id="buttonPlace"></div> </div> </div>

To 'hide' the overflow, you can use the overflow:hidden property on the parent class.

The reason behind this effect is this:

you have set the size of the two 'login's' as 100%, like so:

+-------+ +-------+ | | | | | | | | | | | | | | | | +-------+ +-------+

so they'll be the same height (initially).

However, when you place text in one, you'll get this:

+-------+ |TEXT | | | | | | | +-------+ +-------+ <-- inner container set as 100%; so in effect it has been 'pushed down'

And so in order to do this, you need to ensure your child element is actually the size you need it to be, minus the height of the text.

Alternative

An alternative to using overflow:hidden would be to use a calculation for the height, and so will end up with something like this:

#login:after { content:""; position:absolute; margin-top:5px; width:100%; height: calc(100% - 27px); /*computed height of 'white area' required*/ background-color:#e8eceb; left:0; top:22px; /*Height of text*/ }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.