CODEWITHSUNDEEP
jqueryhtmlcss
user1050619
user1050619

Reputation: 20856

Text Overflow on the div element

Im trying to create a sample document and want to increase the font-size if I click "Medium" & "Large" button.

When I click "medium" button I dont have any problems but when I click "large" button the font-size overlaps to other divs.

Question 1. Why would the text overlap when I increase the font-size?

<!DOCTYPE html>
<html>

    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script>
            $(document).ready(function(){

                $("#switcher-medium").click(function(){
                    alert('This is medium');
                    //$('body').removeClass();
                    $('body').addClass('medium');
                });

                $("#switcher-large").click(function(){
                    alert('This is large');
                    //$('body').removeClass();
                    $('body').addClass('large');
                });

            });
        </script>

        <style>
            body{
                background-color:white;
            }

            #header-1st{
                height:30px;
                width:70%;
                float:left;
            }

            #switcher-control{
                height:30px;
                width:30%;
                float:left;
            }
            .medium{
                font-size: 1.5em;
            }

            .large{
                font-size: 2.5em;
            }

        </style>

    </head>

    <body>

        <div id="main-container">
            <div id="header-1st">
            </div>
            <div id="switcher-control">
            <button id="switcher-default"> 
                Default
            </button>
            <button id="switcher-medium"> 
                Medium
            </button>
            <button id="switcher-large"> 
                Large
            </button>
            </div>
            <div id="content">
            This is a test page and you can increase the font-size by clicking the default, medium and large on top corner.
            </div>
        </div>

    </body>

</html>

Upvotes: 0

Views: 68

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

LIVE DEMO

Just remove height:30px; from your top elements

This is all you need:

#header-1st{
  width:70%;
  float:left;
}
#switcher-control{
  float:left;
  width:30%;
}

JS:

var sizes = [1, 1.5, 2.5];  
$("#switcher-control button").click(function(){
    var i = $(this).index();
    $('body').css({fontSize: sizes[i]+"em"});
});

For this HTML

<div id="main-container">

  <div id="header-1st">HEADER</div>  
  <div id="switcher-control">
        <button>Default</button>
        <button>Medium</button>
        <button>Large</button>
  </div>

 <div id="content">
        This is a test page and you can increase the font-size by clicking the default, medium and large on top corner.
 </div>

</div>

Upvotes: 2

Related Questions