CSS wont align text in DIV

Question

I am new in learning jquery and making my own website. This is my fiddle JSFIDDLE. When you hover a new div shows up with some text. But the text is going out of that div. I want that text within the new div. I dont know why that is happening. I know this is a silly question but i spent like more than an hr getting it right.

The code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="example.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box">
  <h2 id='name'> Karan Shah </h2>
  <div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
  <script>
    $('#innerbox').hide();
  </script>
</div>

<script>
$('#name').css('color','black');
$('#name').css('text-align','center');


$(document).ready(function () {
    var originalText = $('#name').text();
    var tOut;
    $("#box").hover(
        function () {   
            tOut = setTimeout(function(){
                $('#innerbox').show('slow',function(){
                    $('#emptyInfo').fadeOut(400, function () {
                        $(this).text('Welcome to my website').slideDown().css('text-align','center');
                    }); 
                }); 
            },1000);        

        },
        function(){
            clearTimeout(tOut);
            $('#innerbox').hide('slow',function(){
                $('#emptyInfo').hide('slow');
            });     
        }
    );
});
</script>

</body>
</html>

the CSS

#box {
    background-color: lightgrey;
    width: auto;
    padding: 25px;    
    margin: 25px;
}
#emptyInfo{
    font-size: 150%;
}

#innerbox {
    background-color: white;
    width: auto;
    height: 30px;
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}

You have to reset default `
` margin: `#emptyInfo { margin: 0; }`. — emmanuel, Dec 17 '14 at 18:20
wow. That helped. Thanks alot. I feel so stupid spending so much time on this little thing. Thanks again — rkbom9, Dec 17 '14 at 18:21

score 1 · Answer 1 · edited May 23 '17 at 12:12

Like emmanuel mentions, Heading tags come baked with their own margins, setting #emptyInfo { margin: 0; } will remedy your issue.

For reference to what these default values could be for you, you can check browser's specific default stylesheets. See here: How can I locate the default style sheet for a browser?

Note that since most HTML elements come with default values, HTML/CSS authors will often "normalize" their pages as described nicely at W3C: http://www.w3.org/International/questions/qa-html-css-normalization.

score 0 · Answer 2 · answered Dec 17 '14 at 18:36

#innerbox height should be auto. Here the JSfiddle

#innerbox {
    background-color: white;
    width: auto;
    height: auto; /*** This should be auto instead of 30px */
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}

CSS wont align text in DIV

` margin: `#emptyInfo { margin: 0; }`.

2 Answers2