CODEWITHSUNDEEP
htmlalignment
Clinton Scott
Clinton Scott

Reputation: 45

HTML Alignment not working properly

This is for a project in a web development course. We have a textbook for the class and one video that the teacher puts in as an example, along with what the end result should look like. This project is supposed to include a header, two columns, and a footer inside a div created type table. We cannot however, use the table functions so this is very specific programming in html.

So after I added text to my div alignment table, the alignment was totally misconfigured, or unaligned to the perfect alignment without text. I have provided the programming below, though the height of the e page is set differently to the text. Text matters, but I am unsure that the amount does.

My question is how can I get my columns and footer to match alignment with my header once I add my text to the project? I also have to add this pesky header to the bottom of the master frame, which it seems to want to attach itself to anything at the moment.

Completing some end tags I have had the problem of the footer now showing up behind the header and after editing the master frame, it now shows up as a line (not around my box content.

NOTE: MUST KEEP POSITION: ABSOLUTE FOR THIS PROJECT

    <!DOCTYPE html>
    <html lang="en">

   <!--
    documentation segment
    website: Operating Systems
    web page: Home
    author: Clinton B Scott
    date created: May.2014
    -->

    <head>
    <meta charset="utf-8">
    <title>Windows</title>

    <style type="text/css">

    #wrapper
    {
    width: 1000px;
    margin: 0 auto;
    }

    #master
    {
    position: absolute;
    padding: 0px;
    border: 1px solid #000;
    background-color: #fff;
    width: 1000px;
    height: 3125px;
    top: 10px;
    }

    #header
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: 80;
    top: 10px;
    left: 15px;
    }

    #navigation
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: auto;
    top: 120px;
    left: 15px;
    }

    #contents-left
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 460px;
    height: auto;
    top: 175px;
    left:15px;
    }

    #contents-right
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 460px;
    height: auto;
    top: 175px;
    left:505px;
    }

    #footer
    {
    position: absolute;
    padding: 10px;
    border: 1px solid #000;
    background-color: #fff;
    width: 950px;
    height: 100px;
    top: 2790px;
    left: 15px;
    }

    a
    {
    font-family: Trebuchet MS;
    font-size: 1em;
    margin: 1em;
    font-weight: 900;
    text decoration: none
    }

    a:linked, a:visited, a:active
    {
    color: #0000ff;
    }

    a: hover
    {
    color: #c0c0c0;
    }

    .medium
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    .large
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 2em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    </style>
    </head>

    <body>

    <div id = "wrapper"><!-- center wrapper -->

    <div id = "master" align="center"><!-- master -->

    <div id = "header" align="left"><!-- header -->

    <div align="center" class="large">Operating Systems</div>

    </div><!-- end header -->

    <div id = "navigation" align="left"><!-- navigation -->

    <a href="../index.htm">Home</a>

    <a href="index_files/MacOS.htm">Mac</a>

    </div><!-- end navigation -->

    <div id="contents-left" align="center"><!-- contents-left -->

    <div align="left">

    <p>Operating system
    From Wikipedia, the free encyclopedia

    <p>An operating system (OS) is an interface between hardware and user which is...


    <p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...

    </div><!-- end contents-left -->

    <div id="contents-right" align="center"><!-- contents-right -->

    <div align="left">

    <p>Windows NT family

    <p>The NT family of Windows systems was fashioned and marketed for higher....
    </div><!-- end contents-right -->

    <div id = "footer" align="left"><!-- footer -->

    </div><!-- end footer -->

    </body>
    </html>

Upvotes: 0

Views: 1132

Answers (2)

InventorX
InventorX

Reputation: 378

Actually the main reason of unalignment of html is to not properly close the html tags and also use of Property:ablosute in CSS.

i have fix the html and CSS. Live Example

Code is here:

<!DOCTYPE html>
    <html lang="en">

   <!--
    documentation segment
    website: Operating Systems
    web page: Home
    author: Clinton B Scott
    date created: May.2014
    -->

    <head>
    <meta charset="utf-8">
    <title>Windows</title>

    <style type="text/css">

    #wrapper
    {
    width: 1000px;
    margin: 0 auto;
    }

    #master {
        padding: 0px;
        border: 1px solid #000;
        background-color: #fff;
        width: 1000px;
    }
    #header
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        height: 80px;
        margin-top: 10px;
    }

    #navigation
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        left: 15px;
        margin-top: 10px;   
    }

    #contents-left
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 460px;
        float: left;
        margin: 9px 0px 10px 15px;    
    }

    #contents-right
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 460px;
        float: right;
        margin: 9px 15px 0px 0px;
    }

    #footer
    {
        padding: 10px;
        border: 1px solid #000;
        background-color: #fff;
        width: 950px;
        height: 100px;
        clear: both;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    a
    {
    font-family: Trebuchet MS;
    font-size: 1em;
    margin: 1em;
    font-weight: 900;
    text decoration: none
    }

    a:linked, a:visited, a:active
    {
    color: #0000ff;
    }

    a: hover
    {
    color: #c0c0c0;
    }

    .medium
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }

    .large
    {
    font-family: Trebuchet MS. Helvetical. Sans-Serif;
    font-size: 2em;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    background: #fff;
    color: #000;
    }








    </style>
    </head>

    <body>

    <div id = "wrapper"><!-- center wrapper -->

    <div id = "master" align="center"><!-- master -->

    <div id = "header" align="left"><!-- header -->

    <div align="center" class="large">Operating Systems</div>

    </div><!-- end header -->

    <div id = "navigation" align="left"><!-- navigation -->

    <a href="../index.htm">Home</a>

    <a href="index_files/MacOS.htm">Mac</a>

    </div><!-- end navigation -->

    <div id="contents-left" align="center"><!-- contents-left -->

        <div align="left">

            <p>Operating system
                From Wikipedia, the free encyclopedia

            <p>An operating system (OS) is an interface between hardware and user which is...


            <p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...

        </div>
    </div><!-- end contents-left -->

    <div id="contents-right" align="center"><!-- contents-right -->

        <div align="left">

            <p>Windows NT family

            <p>The NT family of Windows systems was fashioned and marketed for higher....

        </div><!-- end contents-right -->

    </div><!-- end footer -->

    <div id = "footer" align="left"></div>

    </body>
    </html>

Upvotes: 1

Sharanpreet
Sharanpreet

Reputation: 371

I have checked your code, It seems you used HTML generator for this. Its giving issue due to its absolute position.

I have updated your css, I hope this will help you 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Windows</title>

<style type="text/css">

#wrapper
{
width: 1000px;
margin: 0 auto;
}

#master
{
margin:0px;
padding: 0px;
border: 1px solid #000;
background-color: #fff;
width: 1000px;

}

#header
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 80px;
margin:10px;
}

#navigation
{
float:left;
clear:both;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 25px;
margin:10px;
}

#contents-left
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: 2800px;
float:left;
margin: 10px 0px 10px 10px;
}

#contents-right
{
float:right;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: 2600px;
margin: 10px 10px 10px 0px;
}

#footer
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 950px;
height: 100px;
clear:both;
margin: 10px;
}

a
{
font-family: Trebuchet MS;
font-size: 1em;
margin: 1em;
font-weight: 900;
text decoration: none
}

a:linked, a:visited, a:active
{
color: #0000ff;
}

a: hover
{
color: #c0c0c0;
}

.medium
{
font-family: Trebuchet MS. Helvetical. Sans-Serif;
font-size: 1.5em;
font-style: normal;
font-weight: 500;
text-align: left;
background: #fff;
color: #000;
}

.large
{
font-family: Trebuchet MS. Helvetical. Sans-Serif;
font-size: 2em;
font-style: normal;
font-weight: 500;
text-align: left;
background: #fff;
color: #000;
}

</style>
</head>

<body>

<div id = "wrapper"><!-- center wrapper -->

<div id = "master" align="center"><!-- master -->

<div id = "header" align="left"><!-- header -->

<div align="center" class="large">Operating Systems</div>

</div><!-- end header -->

<div id = "navigation" align="left"><!-- navigation -->

<a href="../index.htm">Home</a>

<a href="index_files/MacOS.htm">Mac</a>

</div><!-- end navigation -->

<div id="contents-left" align="center"><!-- contents-left -->

<div align="left">

<p>Operating system
From Wikipedia, the free encyclopedia</p>

<p>An operating system (OS) is an interface between hardware and user which is...</p>


<p>The introduction of the Intel 80386 CPU chip with 32-bit architecture and paging...
</p>
</div>
</div><!-- end contents-left -->

<div id="contents-right" align="center"><!-- contents-right -->

<div align="left">

<p>Windows NT family</p>

<p>The NT family of Windows systems was fashioned and marketed for higher....</p>
</div><!-- end contents-right -->
</div>
<div id = "footer" align="left"><!-- footer -->

</div><!-- end footer -->
</div>
</div>

</body>
</html>

you can also set height: auto; for

#contents-left
{
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: auto;
float:left;
margin: 10px 0px 10px 10px;
}

#contents-right
{
float:right;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 460px;
height: auto;
margin: 10px 10px 10px 0px;
}

Upvotes: 1

Related Questions