Over-ride overlapping margins when using float

lostCoder · February 14, 2016

Ok, I promise that i am actually making an effort to find the answers myself before I ask here because I'm sure I'm just missing a simple fundamental concept somewhere. I have been learning HTML/CSS and have been trying to make a simple page layout and it has been a challenge! But I have a passing template that technically does what and displays how i want it to, however I'm not happy with the way I had to achieve the goal...

What I am experiencing is my <footer> top margin going behind the whole <main> element and doesn't start registering a change until around 250px or so depending on the amount of content/space <main> is using. How I ended up resolving this was using a <br /> and in the CSS set the line-break (br) "clear" property to "both". As I am trying to make the page somewhat "responsive" to resizing i cant use a width property in percentage and a margin property in pixels and have the same uniform gaps/spaces between elements. I've thought about changing the margins to percents but with the little programming experience I have I can foresee there being an issue down the road. Also I'm just assuming that less code = better performance, so I'm trying to have the least amount of CSS rules and ID's/DIV's as possible in hoping that relying on the defaults as much as possible will make the page display the most similar in different environments. With that being said I would rather understand why i need to use the br as it seems more like hacking it together rather than following semantic standards.

here is the code:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Blank Template</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<style>
* {margin: 0px;padding: 0px;}

body {
    background-color: gainsboro;
}
#bodyContainer {
    background-color: white;
    max-width: 780px;
    padding: 7.5px;
    margin: 15px auto;
}
header {
    background-color: black;
    height: 150px;
    padding: 0px 10px;
    color: white;
    margin: 7.5px;
}
header h1 {
    line-height: 50px;
    text-indent: 15px;
    padding: 10px 0px 0px 0px;
}
header p {
    line-height: 40px;
    text-indent: 35px;
    font-style: italic;
    color: goldenrod;
}
nav a {
    line-height: 50px;
    display: inline-block;
    padding: 0 7.5px;
    text-decoration: none;
    color: goldenrod;
}
nav a:hover {
    color: gold;
}
nav {
    width: 50%;
    float: right;
    text-align: right;
}
aside {
    max-width: 25%;
    display: inline-block;
    margin: 10px 7.5px;
    float: left;
}
aside a {
    text-decoration: none;
    color: black;
    display: block;
    line-height: 30px;
    padding: 0px 10px;
}
aside a:hover {
    color: goldenrod;
}
main {
    max-width: 75%;
    margin: 7.5px 7.5px;
    float: right;
    padding: 10px;
}
main h1 {
    padding: 5px 15px 10px;
    color: goldenrod;
}
main section {
    margin: 7.5px;
    padding: 0px 7.5px;
}
main section article {
    text-align: justify;
    padding: 0px 20px 20px 0px;
}
article h3 {
    padding: 7.5px;
}
article p {
    text-indent: 2em;
}
footer {
    background-color: black;
    height: 30px;
    color: white;
    margin: 7.5px;
    clear: right;
}
footer p {
    text-align: center;
	line-height: 30px;
    margin: 0px auto;
}
footer a {
    color: goldenrod;
    text-decoration: none;
}
footer a:hover {
    color: gold;
}
br {
    clear: both;
}
</style>
</head>
    
<body>
    <div id="bodyContainer">
        <header>
            <h1>Site Title</h1>
            <p>Catchy slogan goes here!</p>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
        </header>
        <aside>
            <a href="#">Side Menu Link 1</a>
            <a href="#">Side Menu Link 2</a>
        </aside>
        <main>
            <h1>Page Title</h1>
            <section>
                <article>
                    <h3>Article Title</h3>
                    <p>
                        This is my attempt at a simple website template. It has been a bumpy road but I think I've just about got it. The page only uses one ID and not a single class! This is just filler text to see how the page looks with the most basic of content.
                    </p>
                </article>
                <article>
                    <h3>Article Title</h3>
                    <p>
                         This is my attempt at a simple website template. It has been a bumpy road but I think I've just about got it. The page only uses one ID and not a single class! This is just filler text to see how the page looks with the most basic of content.
                    </p>
                </article>
            </section>
            <br />
        </main>
        <br />
        <footer>
            <p>© 2016 <a href="https://www.google.com/search?q=define:nullify">Who Cares</a></p>
        </footer>
    </div>
</body>
</html>

The part that bothers me is the <br /> between the closing main bracket and the opening footer bracket. Without it the page wont display properly otherwise it works the same in firefox, chrome, and edge but not in internet explorer (ill work on that when i get to it). Can anyone shed some light on this for me please? The most of the quirks started after I started using "float" in the main element.

Sorry for the unabridged post but I tried to give as many relevant (and some not) details as possible to help you guys help me

dsonesuk · February 14, 2016

I honestly do not see that problem? without br tags it works fine, margins of main and footer will merge with highest of either giving the biggest space. The only problem is that you have not reset margins of header tags or paragraph, which will result when using multiple paragraphs is a big block of text with no separation of paragraphs showing.

lostCoder · February 14, 2016

Remove the <br /> and increase the top margin on the footer to see the conflict. I apologize but I'm not understanding what you mean about reseting the header and paragraph tags, I thought thats what the '*' wildcard did at the top of the style declaration, or do I need to do it again after that? Thanks for taking the time to review my post and code and thanks alot for your input.

dsonesuk · February 14, 2016

When you zero all margins and padding, you HAVE to reset to your requirements all headers (h1 to h6), and paragraphs (p), so ALL browsers will follow these uniform stylings instead there own which differ between browsers.

You can see the result you currently have with no margin set for paragraph by adding two or more paragraphs.

The link i gave you which i did not realize you had to subscribe, sorry! (just google those listings shown), they usually zero all margins/padding and reset again for you, or you can perform your own styling instead.

dsonesuk · February 15, 2016

Its the float of main element causing problem, wrap aside and main in div give it id="#content" and style with #content {overflow: hidden;} this will prevent float seeping to footer and prevent it trying to merge with floated elements.

Sign In

Over-ride overlapping margins when using float

Recommended Posts

lostCoder

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

lostCoder

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity