Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Positioning A Division Using The Float Style

    Uploaded by

    WENNIE ROSE P. CAMBA

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Positioning A Division Using The Float Style

    Uploaded by

    WENNIE ROSE P. CAMBA
    9 views12 pages

    Original Title

    Positioning a Division using the float style

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    9 views12 pages

    Positioning A Division Using The Float Style

    Uploaded by

    WENNIE ROSE P. CAMBA

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 12

    LESSON 6

    Positioning
    HTML5 Tags
    Ms. Wennie Rose P. Camba
    Subject Teacher
    There are two ways of positioning a
    division (either using the <div> tags or
    the new HTML.

    These are the float style rule and the


    position style rule.
    1. Float Style - is used to insert an
    additional <aside> division to your
    web page layout, and will place your
    division beside another either to the
    right or left.
    2. Position Style - is used to place a
    division on a specific spot of your
    page.
    There are four possible values for a
    position style rule:

    a. Absolute value - This value


    specifies a fixed position with respect
    to its first positioned element or tag.
    Usually, the <body> tag is used to be
    the parent element
    unless specified.
    b. Relative value - This value is
    compensated from the element's
    natural position.Other elements on
    the page are not affected, even if the
    new position causes elements to
    overlap.
    c. Fixed value - This value specifies a
    fixed position within the browser
    window thatdoesn't change even
    when the display is scrolled up or
    down.
    d. Static value - It is a default value
    that specifies elements render in
    order, or as they appear in the
    document flow.
    Positioning
    a Division
    using the
    float style
    Open "html5layout.html"
    in the Notepad.
    Change the size of the
    Section style width to
    900px.
    Type the following after the Top
    Navigation tag:
    <aside style="width: 300px; height:
    300px; border: 3px solid gray;
    background-color: orange; margin-
    right: 70px; float: right"? <p style="text-
    align: center; font-size: 36px"> Aside
    </p>
    </aside>
    Save your file.

    Test your file in a browser.

    You might also like