CODEWITHSUNDEEP
htmlcss
Abir Roy Chowdhury
Abir Roy Chowdhury

Reputation: 3

Make an arrangement (position and size) of <div> elements independent of the browser window size/resolution

I am beginner in HTML and CSS. Thus I only have very basic knowledge regarding the subject. I have been given a task from one of my professors to create a "flower with a flower pot" using only HTML and CSS. We are not allowed to embed images or use canvas, svg, bootstrap or javascript.

I have been able to do the task with some help from the internet. I have used <div> elements to do the task as I am not aware of any other way (so I am open to suggestions). But I notice that as I change the size of the browser window the flower-pot does not look like a flower-pot anymore.

MY QUESTION : How do I make the elements stay in their place?

(please see code and screenshot)

Screenshot

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Flower</title>
</head>

<body>


<!–– Top left petal-->

<div id="div1">
    <style>
    #div1 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        border: 2.5px solid black;
    }
    </style>
</div>

<!–– Top right petal-->

<div id="div2">
    <style>
    #div2 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-left:2.88%;
        border: 2.5px solid black;
    }
    </style>
</div>

<br>

<!–– Central Area of the flower-->

<div id="center">
    <style>
    #center {
        height: 70px;
        width:  6%;
        background-color:red;
        border-radius:50%;
        margin-top: 2%;
        margin-left:3.5%;
        border: 3px solid black;
    }
    </style>
</div>


<br> <br> <br> <br>


<!–– Bottom left petal--> 

<div id="div3">
    <style>
    #div3 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-top:-7.1%;
        border: 2.5px solid black;
    }
    </style>
</div>

<br> <br>

<!–– Curved Stem-->

<div id="stem">
    <style>
    #stem{
          width:350px; height:100px;  
          border:solid 5px #000;
          border-color:green transparent transparent transparent;
          border-radius: 50%/100px 100px 0 0;
          transform:rotate(90deg);
          -webkit-transform:rotate(90deg);
          margin-top:-2.6%;
          margin-left:-107px;
    }
    </style>
</div>

<!–– Bottom right petal-->

<div id="div4">
    <style>
    #div4 {
        height: 62px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-left:8%;
        border: 2.9px solid black;
        margin-top:-15.6%;
    }
    </style>
</div>

<br>
<br> <br> <br>
<br> <br> <br> 
<br> <br> <br> 
<br> <br> <br>

<!–– Flower Pot-->

<div id="pot">
    <style>
    #pot {

        border-bottom: 100px solid;
        border-bottom-color:rgba(87,0,1,1.00);
        border-left: 50px solid transparent ;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
        margin-left:-10px;
        margin-top:-13.3%;
    }

    </style>
</div>

</body>
</html>

Upvotes: 0

Views: 237

Answers (1)

Xander
Xander

Reputation: 1011

You are using percentage widths which means that the width will equal 5%, in the case of #div2, of the browser window.

To create a fixed width which will remain the same regardless of window size use px.

For example:

#div2 {
        height: 60px;
        width:  200px;
        background: orange;
        border-radius: 40%; //This can stay as a %, not effected by window size
        float:left;
        margin-left: 10px;
        border: 2.5px solid black;
    }

Upvotes: 1

Related Questions