CODEWITHSUNDEEP
jqueryhtmlcss
An SO User
An SO User

Reputation: 25028

Why are the <div> of different height?

I am a newbie to web-designing. I made a simple webpage DEMO with a form on the left and learning resources on the right (displayed using jQuery). Here is my markup: 

<!DOCTYPE html>
<html>
    <title>Membership Form</title>
    <style>
        td {
            padding: 8px;
            background-color: #ffffff;
        }

        table {
            font-family: verdana,arial,sans-serif;
            font-size:14px;
            color:#333333;
        }

        h3{
            font-family: verdana,arial,sans-serif;
            text-align:center;
            color: #808080;
        }

        input[type=text], textarea, input[type=radio] {
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            font-family: verdana,arial,sans-serif;
            padding: 3px 0px 3px 3px;
            border: 1px solid #DDDDDD;
        }

        input[type=text]:focus, textarea:focus, input[type=radio]:focus {
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);
            font-family: verdana,arial,sans-serif;
            padding: 3px 0px 3px 3px;
            border: 1px solid rgba(81, 203, 238, 1);
        }

        input[type=submit], input[type=reset] {
            padding: 14px 26px;
            font-size: 14px;
            line-height: 100%;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            transition: background 0.1s ease-in-out;
            -webkit-transition: background 0.1s ease-in-out;
            -moz-transition: background 0.1s ease-in-out;
            -ms-transition: background 0.1s ease-in-out;
            -o-transition: background 0.1s ease-in-out;
            color: #808080;
            font-family: verdana,arial,sans-serif;
        }

        div{
            border : solid;
            border-width : 1px;
            width : 45%;
            height : 75%;
            border-style : dashed;
            border-color : #808080;
            padding : 5px;
        }

        #form{
            float : left;
        }

        #siteloader{
            float : right;
        }

        object {
            width: 100%;
            height : 75%;
        } 


    </style>
    <body>
        <h3> Membership Form</h3>
        <!-- TABLE inside FORM, always -->
        <!-- FORM contacts a CGI (Common Gateway Interface) which echos the submitted data -->
        <div id = "form">
            <form method = "post" action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
            <table>
                    <tr>
                        <td>First Name:</td>
                        <td>
                            <input type="text" size=50 placeholder="First Name" name="fName" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>
                        <td>
                            <input type="text" size=50 placeholder="Last Name" name="lName" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Gender:</td>
                        <td>
                            <input type="radio" name="gender" value="male" required="true">Male</input>
                            <input type="radio" name="gender" value="female">Female</input>
                        </td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td>
                            <textarea rows=10 cols=50 name="address" placeholder="Address" required="true"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            <input type="text" size=50 placeholder="Email" name="email" required="true">
                        </td>
                    </tr>
                    <tr>
                        <td>Contact:</td>
                        <td>
                            <input type="text" size=50 placeholder="Residence" name="residence" required="true"> <br>
                            <input type="text" size=50 placeholder="Mobile" name="mobile" required="true">
                        </td>
                    </tr>
            </table>
            <center>
                <input type="submit" value="Submit"></input>
                <input type="reset" value="Reset"></input>
            <center>
            </form>
        </div>
        <div id = "siteloader">
        </div>
    </body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#siteloader").html('<object data="http://www.w3schools.com/html/html5_form_attributes.asp"/>');
        });
    </script>
</html>

I have a couple of problems:

  1. The <div> are of different height even when I state in CSS that they should both be 75%. How can they both be made to have the same height?
  2. Upon clicking a link on the right, the browser opens a new page, leaving the page I made. How can I ensure that the browsing happens without leaving my page?

Upvotes: 0

Views: 94

Answers (3)

XciA
XciA

Reputation: 338

The style for the div is given a height of 75%, now 75% of what?

add this declaration

html,body{
       height:100%;
}

Upvotes: 2

Banana
Banana

Reputation: 7484

when you set size of an element to be 75%, it will be 75% of its first parent element that has a constant size.

if you set the size of the body element to be 100px, the divs then would scale to 75px each.

if you are not sure what size your body would be, you could scale the divs with jQuery by taking the document/window height and setting the divs to be 75% of it (see jQuery documentation.)

about the navigation issue, i might have a workaround for you. do an http get request to the w3schools website and get the html, then go over all the links and replace them programatically as you see fit, and then paste the html into the right div.

Upvotes: 1

Peeja
Peeja

Reputation: 14294

  1. The two blocks are each set to height: 75%, which means 75% of their parent's height. But: the parent doesn't actually have a height, or at least not soon enough. The parent's height is not specified (it's auto by default), which means that it's based on the height of its contents. But the content's height, 75% is based on the parent. It's a circular dependency, so the browser gives up.

    However, the iframe/object's height is affected by the 75%, while the first div is not. That I can't explain.

  2. There is, unfortunately, no way to make the navigation happen inside the frame. All of the links on w3schools.org have target="_top", which is an explicit request not to navigate within any frames.

As for the object element: I think you're better off with an iframe than an object. Using object for loading HTML is unusual and nonstandard.

Upvotes: 1

Related Questions