CODEWITHSUNDEEP
htmlcss
Marked as Duplicate
Marked as Duplicate

Reputation: 1249

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

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>

Upvotes: 1

Views: 48

Answers (2)

Adil
Adil

Reputation: 22381

<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>.

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

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>

Upvotes: 3

Related Questions