Why these blocks are positioned incorrectly, everything seems to be right?

Question

I'm quite a beginner with HTML/CSS/JS. I tried to try things like the "display:" etc. Everything seemed to work fine, except one thing. The blocks I added should be exactly on the same line, but the right one is always a bit more down than the left one. I tried adding height, changing values etc. but nothing seemed to help, so I decided to post it here. Also, the button "alert" somewhy seems not to work?

https://jsfiddle.net/6qwqjctu/2/

<body background="assets/images/wallpaper.png">
    <header style="font-size:40px" class="indextitle">
<strong>Testing</strong>

    </header>
    <br>
    <br>
    <section class="firstblock">
<code>
<strong>1st new: </strong> <div id="dn1">None</div>
<strong>2nd new: </strong> <div id="dn2">None</div>
<strong>3rd new: </strong> <div id="dn3">None</div>
<strong>4th new: </strong> <div id="dn4">None</div>
</code>

    </section>
    <br>
    <br>
    <section class="secondblock">
<code>
<strong>First: </strong> <div id="d1">None</div>
<strong>Second: </strong> <div id="d2">None</div>
<strong>Third: </strong> <div id="d3">None</div>
<strong>4th: </strong> <div id="d4">None</div>

</code>

    </section>
    <br>
    <br>
    <hr id="clear">
    <section class="buttonone" onclick="alertaction()">alert</section>
    <footer>
        <p style="font-size:25px">&copy; Nobody</p>
    </footer>
    <script src="script.js"></script>
</body>

Joel Almeida · Accepted Answer · 2015-07-09T10:04:53.373

Your problem is that you have 2 <br/> between your sections. Remove those.

So you will end up with this:

<section class="firstblock">
    <code>
        <strong>1st new: </strong> <div id="dn1">None</div>
        <strong>2nd new: </strong> <div id="dn2">None</div>
        <strong>3rd new: </strong> <div id="dn3">None</div>
        <strong>4th new: </strong> <div id="dn4">None</div>
    </code>
</section>
<section class="secondblock">
    <code>
        <strong>First: </strong> <div id="d1">None</div>
        <strong>Second: </strong> <div id="d2">None</div>
        <strong>Third: </strong> <div id="d3">None</div>
        <strong>4th: </strong> <div id="d4">None</div>
    </code>
</section>

About the button:

Avoid using onClick attribute. Use click listeners instead. Also, if its a button, use the button tag.

Something like this:

var bar = document.getElementById('bar');

bar.onclick = function(event) {
  alert('click')
}

<button id="bar">Alert</button>

That does work, but what about the button - why doesn't it work? — Marked as Duplicate, Jul 09 '15 at 09:49
@ThomasTom edited about the button. adapt to your current code by adding an id to the button. — Joel Almeida, Jul 09 '15 at 10:05

score 0 · Answer 2 · edited May 23 '17 at 12:14

<br> is used for line breaks which is causing the problem here and I'm confused why you're trying to use <br> tag after first <section>.

I'm also confused about your heavy use of <section> everywhere. I changed the button from <section> to normal <button>. Check the updated code: http://plnkr.co/edit/cNgXcU5dNoGmRPD6Hu10?p=info

Click to see in-detailed difference between <section> and <div>.

Why these blocks are positioned incorrectly, everything seems to be right?

2 Answers2