Output of two div tags overwritten

i have written the code for the div tags inside my body tag like this.
here are the screenshot of the code i have written


and the output is shown as the given hyperlink
[file:///C:/Users/jainr/Downloads/Documents/placements/iot%20projects/index.html](file:///C:/Users/jainr/Downloads/Documents/placements/iot%20projects/index.html)
the last two div tags merge in the first two div tags why so? how to correct it so that the ouptut of the last two div tags are from a new line after the third div tag?

Hello @jain.reechika , it seems like your div tags overlap because of two reasons:

  1. Your pixel ratios are off, as in you haven’t given pixel values which are cause them to not overlap.
  2. Or the sum of pixels you have mentioned (horizontal or vertical-depends on the overlapping) exceeds the what your screen can display, hence your browser tends to overlap the div attributes.
    How do we solve this?
    Instead of pixels, you can specify the percentage of the screen you want a div attribute to occupy. This way there is no overlapping.
    Syntax: <div style="position:fixed; top:10px; left: 0px; width:50%; height:50px>This is div 1 </div>
    Hope this helps :slight_smile:
1 Like

@jain.reechika check the reply in this screenshot. since my last reply didnt deliver the tags and attributes i mentioned

thanku . the issue was resolved by changing the positioning from fixed to static