CODEWITHSUNDEEP
htmlcsspositionmargin
Kaushik
Kaushik

Reputation: 553

CSS element positioning for all resolutions

I am looking to build a site and using CSS positioning now. But for each resolution, it places the in different positions from the borders because of the margin property. But, how can I place the that it is equally spaced for all screen resolutions ? 

<!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>

    <style type="text/css">
    #homeHeader{
        text-align: center;
        font-family: Verdana;
    }
    #homeTabs{
        border: 1px solid black;
        height: 800px;
        width: inherit;
    }
    #tabOne{
        margin:50px 50px 20px 100px;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabTwo{
        margin: 0px 50px 20px 250px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabThree{
        margin: 0px 50px 20px 400px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFour{
        margin: 0px 50px 20px 550px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFive{
        margin: 0px 50px 20px 700px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSix{
        margin: 0px 50px 20px 850px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSeven{
        margin: 0px 50px 20px 1000px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }s
    center{
        font-family: verdana;
    }
    </style>


</head>
<body>

<div id="homeHeader">

    <h1 id="headerH1">HOMELESS MONKEYS</h1>
</div>

<div id="homeTabs">

<div id="tabOne">
    <center><br>Fashion1</center>
</div>

<div id="tabTwo">
    <center><br>Fashion2</center>
</div>
<div id="tabThree">
    <center><br>Fashion3</center>
</div>
<div id="tabFour">
    <center><br>Fashion4</center>
</div>
<div id="tabFive">
    <center><br>Fashion5</center>
</div>
<div id="tabSix">
    <center><br>Fashion6</center>
</div>
<div id="tabSeven">
    <center><br>Fashion7</center>
</div>
</div>

</body>
</html>

I can understand that it places the differently for different resolutions from the border because of the margin distances, but how to make it equally spaced for all screen resolution ?

Upvotes: 1

Views: 70

Answers (2)

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

You must chose if you either want a responsive layout or a fixed one. If you want a fixed layout your main container should have a fixed width in px and the elements inside must be in px too.

If you want a responsive layout you should use relative units (mostly em/rem and %) and media queries to change your layout at certains breakpoints.

Links :

Media queries

CSS units

Upvotes: 0

ProblemSolver
ProblemSolver

Reputation: 644

Could you try using % instead of px.

Upvotes: 1

Related Questions