0

Okay sorry guys if this is a stupid question, I've done my best to search for possible solution or similar questions and while there are questions regarding <div> spaces, the solutions don't work when I try to implement it.

So basically to illustrate the problem. My page shows this: enter image description here

When I wanted it to show this: (edited via Paint) enter image description here

Here is the code for the body:

<body>
    <div id="site-wrapper">
        <header>
            <nav id="header-panel">
                <p>Welcome <?php echo $_SESSION['name']; ?>!</p>
            </nav>
        </header>

        <div id="core">
            <div id="left-nav">
                a
            </div>
            <div id="main-core">

            </div>
        </div>

        <footer>

        </footer>
    </div>
</body>

Now there are nothing special going on in the CSS, just colors so the default behavior of the arrangement is really like this. I've tried changing the margin, and the display types of the divs but there's no change and they still love their spaces.

header {
    background: #ffaa99;
    font-size: 1.5em;
    color: #333;
    margin: 0; padding: 0;
}

div{
    margin: 0; padding: 0;
    /* border: solid 1px black; */
}
#left-nav{

    background: #e0e0e0;
    display: inline-block;
    width: 250px;
}
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Prince Merluza
  • 133
  • 1
  • 9
  • You are right: "there is nothing special going on in the css", however the _default_ css rules for `
    ` tags define a visible padding. You will have to set that to zero.
     – arkascha Feb 08 '16 at 20:11
  • Most of the vertical spacing around the paragraph is probably the default margin the browser adds to unstyled paragraphs. The body also has padding. Looks like you didn't use a browser reset or normalizer stylesheet. You also seem to not have the correct understanding of the flow fit that left nav. How is it going to calculate how tall it should be if you resize the window? Most importantly you didn't include any CSS. That is needed before much help can be provided. – Joseph Marikle Feb 08 '16 at 20:12
  • I've added the CSS. I've added margin: 0 but it still did not fix the issue. However, adding * { margin: 0; padding: 0; } did the trick. Although of course that means it just set all of the elemnts to that setting. – Prince Merluza Feb 08 '16 at 20:25

1 Answers1

3

Browsers have default style sheets that includes default margins, etc. It is a good practice to include a CSS reset file that essentially removes all of the defaults so you get expected behavior.

There are a number of sites that will provide this code for you, including:

http://cssreset.com/

Jeff B
  • 29,943
  • 7
  • 61
  • 90
  • CSS resets don't always set the `margin-bottom` to 0px though. Quite often they sent the values to consistent values on all browsers (as opposed to each browser potentially using a different default values). – Kirk Beard Feb 08 '16 at 20:13
  • 1
    @KirkBeard: True. The point of a reset/normalizer is to start with a base that is known and build off of that, not to "clear everything to zero," per se. You can always modify the CSS after applying the reset. – Jeff B Feb 08 '16 at 20:16