5

I have the following simple html code for a simple template:

<!DOCTYPE html>
<html>   

    <head>
        <title>My new website</title>
        <meta name="description" content="Simple website styled using flex box layout">
        <meta http-equiv="refresh" content="60">
        <link rel="stylesheet" type="text/css" href="style1.css">
    </head>

    <body>
        <div class="mainContainer">
            <nav class="mainMenu">
                <ol>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact Us</a>
                    </li>
                </ol>
            </nav>
            <div class="mainArea">
                <aside class="leftBar">
                    <h3>Navigation side bar</h3>
                    <p>Still need to think better what I will implement here.</p>
                </aside>
                <article class="mainContent">
                    <h1>Welcome!</h1>
                    <p>Nice to meet you...</p>
                </article>
                <aside class="rightBar">
                    <h3>News</h3>
                    <p>No news for now.</p>
                </aside>
            </div>
            <footer class="mainFooter">
                <p>Copyright &copy;
                    <a href="mailto:[email protected]"> someone</a>
                </p>
            </footer>
        </div>
    </body>

</html>

But the layout broke after I added <!DOCTYPE html> at the beginning of the html code. Now it looks like this:

enter image description here

But it should look like this:

enter image description here

Not only the margins broke, for example also the navigation bar is not exactly how it should be. I searched around for a solution, and there are some problems related, but I simply cannot understand why there this problem.

Here you have the CSS code:

html, body{        
    height: 100%;  
    width:auto; 
    font: 14px Arial;
    color:white;
    background: #444;
}

/* links */
a{
    text-decoration: none;
    color: #00aefb;
}

a:visited{
    color:#008efb;
}

a:hover{
    color: #999;
}

/* flex elements */

.mainContainer, .mainFooter, .mainArea, .mainMenu, .mainMenu ol{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
}


/* Main container */
.mainContainer{
    font-family: Georgia;      
    flex-direction: column;     
    -webkit-flex-direction: column;     
    -moz-flex-direction: column;
}

/* mainMenu and footer */
.mainMenu, .mainFooter{
    background: #555;
    border: 1px solid white;
    border-radius: 2px;
    padding: 10px;
}

/* Just footer */
.mainFooter {
    text-align: center;
    font: 15px Arial;
    min-height: 60px;

    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;

    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

/* Main area of contents */
.mainArea{
    color: white;
    border: 1px solid white;
    border-radius: 2px;
    margin: 20 0 20 0;
    min-height:800px;                    
}

/* Main area of the main area */
.mainContent{
    background: #eee;
    color: black;
    padding:20px;

    flex: 2 2 50%;  
    -webkit-flex: 2 2 50%;
    -moz-flex: 2 2 50%;
}

/* Left and right side bars */
.leftBar, .rightBar{
    padding: 10px;

    flex: 1 1 15%;
    -webkit-flex: 1 1 15%;
    -moz-flex: 1 1 15%;    
}

/* mainMenu bar at the top */
.mainMenu {
    font: 16px Arial;

    justify-content: center;                
    -webkit-justify-content: center;
    -moz-justify-content: center;

    padding: 0;    
}

.mainMenu ol {
    list-style: none;
    padding: 0; /* Removes annoying indentation */
    margin: 0;
    text-align: center;
}

.mainMenu ol li{
    display: inline;
    padding: 20px;
    margin: 0 30 0 30;
}

li:hover, li.active{
    background: #222;
    color: #999;
    border-radius: 5px;
}


@media all and(max-width: 640px){
    .mainArea{
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;        
    }

    .mainMenu {
        font: 18px Arial;

        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }

    .mainMenu ol {
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;

        align-items:stretch;            
        -webkit-align-items:stretch;        
        -moz-align-items:stretch;
    }

    .mainMenu ol li {
        margin: 0;
        padding: 10px;
    }

    .mainContainer .mainArea {
        border: 0;
        border-radius: 0;                   
    }

    .mainContent{
        order: -1;
        -webkit-order: -1;
        -moz-order: -1;

        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;
    }

    .leftBar {
        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;                 
    }

    .rightBar{
        border: 1px solid white;
        border-radius: 2px;                                     
    }

}

2 Answers 2

6

I wouldn't say that adding <!DOCTYPE html> breaks out the layout. The doctype tells the browser how to interpret the HTML and CSS, if you don't specify one, then the browser goes in quirk mode, and the display is different from a strict mode.

By adding the <!doctype html>, some of your CSS styles become incorrect and the browser does interpret them the best way that it can. For example, one of the issues that you have is that there are some non-zero numeric values without specifying the unit (e.g.: margin: 20 0 20 0;).

0
2

You are missing .mainMenu { margin-bottom: 10px; }

Or alternatively, if you want to use <!DOCTYPE html> then fix this .mainArea { margin: 20px 0 20px 0; }, you did not mention any units.

CSS Units
CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: relative and absolute.

Reference

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.