CODEWITHSUNDEEP
htmlcss
Justin
Justin

Reputation: 473

Inline height and width on div not applying, while it does on canvas

 #mycanvas {
        box-sizing: border-box;
        position : relative;
        top: 100;
        left: 0;
    }
    
    #base_map {
        box-sizing: border-box;
        position : relative;
        top: 100;
        left: 0; 
    }
<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map"  width="850" height="250" style="border: 1px solid #000000;"></div>

The result is the webpage can show the border of mycanvas and base_map, but the shape of base_map is not correct.

I don't why since the attributes of canvas and div are the same in the css file.

enter image description here

Upvotes: 1

Views: 117

Answers (3)

Justin
Justin

Reputation: 473

I solved the problem by relocating #base_map { ... } in <style> in <head>.

But why ?

<head>
<link rel="stylesheet2" href="style.css" />
<style>
    #base_map {
        margin: 50px 100px;
        width: 100%;
        height: 100vh;
        width:850px;
        height:250px;
    }
</style>
</head>

<body>
    <h1>hello world</h1>
    <canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
    <div id = "base_map" style="border: 1px solid #000000;"></div>
</body>

The css file only contains:

#mycanvas {
    box-sizing: border-box;
    position : relative;
    top: 100;
    left: 0;
}

The result is shown as below:

enter image description here

Upvotes: 0

Sahil Dhiman
Sahil Dhiman

Reputation: 9

hi i tried your question and you done two mistakes . first in div you have to write anything like 1 2 or any alphabet . and second try to give value in pixcel or in percentage no in just 840 0r something . best of luck.

Upvotes: 0

Youssouf Oumar
Youssouf Oumar

Reputation: 46023

While some HTML elements accept a width and height as attribute (canvas, img...), others don't (like div). You should in the last case use CSS to set those dimensions. Like so:

#mycanvas {
    box-sizing: border-box;
    position : relative;
    top: 100;
    left: 0;
}

#base_map {
    box-sizing: border-box;
    position : relative;
    top: 100;
    left: 0; 
    width:850px;
    height:250px;
}
<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map" style="border: 1px solid #000000;"></div>

In your case you are not seeing the div's border, because it doesn't have any height, since it's empty.

Upvotes: 1

Related Questions