HTML + CSS strange DIV error

Question

I'm relatively new to HTML, and I'm having minor issues with getting two divs to line up. The first div is the top box, and the second div is the video box underneath it. Both are the same dimensions in width, but their height differs. Whenever I place the video box div inside the top box div, the video box div is shifted 5px to the right for no apparent reason. I can fix it by using margins, but I've been googling all day and can't find out why it's happening. Here's my HTML code, and the CSS code.

.smoothbox
    {
        background-color: darkseagreen;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        border-color: black;
    }
    
    #topbox
    {
        width: 800px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #video
    {
        width: 800px;
        height: 600px;
        margin-top: 200px;
    }

    <html>
        <head>
            <title>Camagru</title>
            <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <div id="topbox" class="smoothbox">
                <video id="video" class="smoothbox" autoplay></video>
                <button id="snap">Snap Photo</button>
                <canvas id="canvas" width="800" height="600"></canvas>
                <script>
                    //Stream Video
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                    {
                        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                        video.src = window.URL.createObjectURL(stream);
                        video.play();
                        });
                    }
                    //Snap Photo
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var video = document.getElementById('video');
                
                    document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
                </script>
            </div>
        </body>
    </html>

All help is greatly appreciated!

Why not move the video from inside the topbox to directly below it? Then your markup would reflect the layout and it will render correctly, you can put a container around those if you need it. — Matt
– Matt, Commented Oct 10, 2016 at 15:14
He's right. What's the point of having a div inside another div if you're going to move it out with css?? I don't understand what you're doing.. Anyway your video moves because of the borders. — Jonas Grumann
– Jonas Grumann, Commented Oct 10, 2016 at 15:18
Anyway the reason for the offset is that the video is a descendant of the topbox, the topbox has 5px of padding and so when the page renders, regardless of the margin-top it has observed that border and placed it "inside". This is not the correct method of positioning elements, abusing margins will create more problems for future Nodzi. — Matt
– Matt, Commented Oct 10, 2016 at 15:19
@Nodzi You're free to accept one of the answers below, but I would really like to understand why your html structure is like this so we can fix it together, we don't want you to move on with a wrong concept in your head. — Jonas Grumann
– Jonas Grumann, Commented Oct 10, 2016 at 15:21

Mihai T · Accepted Answer · 2016-10-10 15:26:41Z

the problem is that you have a border of 5px on .smoothbox so both topbox and video get a border of 5px

so that's why the green area of the video shifts 5px from left because you add 5px to the left ( top bottom and right ) of the video container

without setting box-sizing:border-box , both divs will exceede their widths of 800px and will have a width of 810px.

see example below with box-sizing: border-box; to see more clearly what's going on

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;

}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
      box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

you can use negative margin ( margin-left:-5px ) and so the two divs will be aligned. see snippet

.smoothbox
{
    background-color: darkseagreen;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
    border-color: black;
}

#topbox
{
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#video
{
    width: 800px;
    height: 600px;
    margin-top: 200px;
    margin-left: -5px;
    margin-right: auto;
}

<div id="topbox" class="smoothbox">
            <video id="video" class="smoothbox" autoplay></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="800" height="600"></canvas>
            <script>
                //Stream Video
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
                {
                    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    });
                }
                //Snap Photo
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var video = document.getElementById('video');

                document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);});
            </script>
        </div>

but i suggest you change the html structure and make them siblings.

and use box-sizing:border-box if you add border because if not, instead of occupying 800px; the div with border:5px will occupy 810px instead

Thank you for the solution. I'm using the top box as the main div, and everything else as divs inside of it so that the structure is maintained when the window is resized. I'm not too sure what you meant with changing the html structure and making them siblings. Can you please recommend a good tutorial on how to properly structure HTML code?
in your current structure, the relationship between topbox and video is one of parent > child . a sibling relationship is a brother brother strucure...that means both topbox and video are on the same level in the HTML structure. Example: <div class="parent"><div class="child"></div></div> example siblings : <div class="sibling"></div><div class="sibling"></div>

Parker · Accepted Answer · 2016-10-10 15:13:09Z

0

It sounds like it's possible that, since you're nesting the video inside the #topbox div, there may be a margin-left on the video or a padding-left on the #topbox div. Consider setting both of those values to zero and see what happens.

answered Oct 10, 2016 at 15:13

Parker

5131 gold badge5 silver badges15 bronze badges

Comments

Hemel · Accepted Answer · 2016-10-10 15:17:47Z

0

The 'Div' take border automatically because you give border-width: 5px; .

answered Oct 10, 2016 at 15:17

Hemel

4413 silver badges15 bronze badges

Collectives™ on Stack Overflow

HTML + CSS strange DIV error

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related