0

Im making a test web page in html 5 in Sublime text (mac) with css and i've repeatedly checked what the problem is but i can't fix the issue. I want the orange colour to colour only the footer (and header border bottom) but it fills the whole webpage (minus header).

How do I fix this?

Additionally, what mistake did I make?

ps - I have tried colouring the aside and article but that doesn't work since the height of the 2 are different and the footer still colours everything that isn't yet coloured (apart from the body). Also adding a break (br) in the html doesn't work as it adds a break to the colour at the top of the page

heres my code for the html:

    <!DOCTYPE html>
<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>

    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

And here is the css:

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{
    float: left;
    width: 65%;
}

aside{
    float: right;
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

footer{
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

Footer colour (orange) colours whole webpage

Thanks in advance!

Kaze-QS
  • 17
  • 3

2 Answers2

0

The issue you are having is that you are positioning the page content using float, thus your footer is actually taking up the space behind the content. Instead of using float to position your body content, I would recommend using flexbox. To read up more on it see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I have modified your css and html to use flexbox instead and it resolves the issue you are having.

HTML

<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <div class="content">
    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>
    </div>


    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

CSS

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{

    width: 65%;
    background: white;
}

aside{
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

.content {
  display:flex;
    flex-direction: row;
}
footer{
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}

Link to working example: https://jsfiddle.net/Matthew_/u2weo0g8/4/

Matthew Varga
  • 405
  • 4
  • 14
  • will "row" align it all to a certain side or even it out (50/50 or 33/33/33)? – Kaze-QS Feb 23 '19 at 16:43
  • `flex-direction: row` aligns the children content horizontally. If you replace `row` with `column` it will instead align the children content vertically. Setting the `flex-direction` has no impact on how much room each child element takes up. – Matthew Varga Feb 25 '19 at 02:57
0

You have to make change to footer css as below. Just add clear: both;

footer {
    clear: both;
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}


.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

a{
    text-decoration: none;
}

body{
    background-color: #f3f3f3;
    font-family: Arial;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

/* header */

header{
    background: #35424a;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 3px #e8491d solid;
}

header h1{
    float: left;
}

header #highlight{
    color: #e8491d;
}

header nav{
    float: right;
    padding-top: 4px;
}

header nav a{
    color: #e2e2e2;
    font-weight: bold;
}

header nav a:hover{
    color: #fff;
}

/* text */

article{
    float: left;
    width: 65%;
}

aside{
    float: right;
    width: 35%;
    border-left: 1px #a8a8a8 solid;
    box-sizing: border-box;
}

footer {
    clear: both;   
    text-align: center;
    color: #fff;
    background-color: #e8491d;
}
<!DOCTYPE html>
<html>
<head>
    <title>Task 3b</title>
    <link rel="stylesheet" type="text/css" href="../CSS/hwk.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>
                <span id="highlight">Main</span> Header
            </h1>
            <nav>
                <p><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">SERVICES</a></p>
            </nav>
        </div>
    </header>

    <article>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </article>

    <aside>
        <div class="container">
            <p class="maintext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>
    </aside>

    <footer>
        <div class="container">
            <p>
                -- &copy; 2019 | <a href="#">Contact Us</a><br>
                ----------
            </p>
        </div>
    </footer>
</body>
</html>

For more reference about clear property refer here => What is a clearfix?

Read about it in this article - by Chris Coyer @ CSS-Tricks

G_real
  • 1,137
  • 1
  • 18
  • 28
  • thank you i have been trying to figure this out for days. Might i ask what clear does and how it works and other "properties" (right word?) it has e.g. instead of both; what other functions does it have? – Kaze-QS Feb 15 '19 at 19:22
  • @Kaze-QS If this answer has solved your problem, kindly mark this answer as accepted. Also I have added more useful links for that at the bottom of the answer. Please refer it. – G_real Feb 15 '19 at 19:24