CODEWITHSUNDEEP
htmlcsscss-position
Abe Gold
Abe Gold

Reputation: 35

Trouble positioning elements. with CSS

I have been trying to learn HTMl and CSS for a while, I already know some of the basics, but for a long time I have been struggling with positioning items where I want them.

I have followed many tutorial, and if I follow it exactly hoy they do it everything works perfect, but when I start playing with things around to make it a bit more complex, things don't behave the way that I expect to.

Check at this image for example. I have rows with elements, the first one I was able to cover 50% percent of the screen with each item and align them in the middle with a float, but when I change the width to 40% instead 50%, they loose the center alignment and what is even more strange to me is that they move down a few pixels and loose the separation with the item bellow. I don't understand why changing the width affects its vertical position.

With the elements of the second row, that im positioning them as absolute, I can't figure out how to center them in the middle of the screen.

Ande the forth row, the beige and green boxes, I don't understand why the text on the beige box is on the bottom of the box and part of it is out of the box, while the text in all the other rows aligned vertical to the center of the box automatically.

Sample

Here is my code: 

       body {
                margin: auto;
                max-width: 4000px;
                height: 5000px;
                font-family: "Lato";
            }
            #text-1{
                background-color: black;
                color: white;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-1:hover{
                background-color: white;
                color: black;
            }
            
            #text-2 {
                background-color: lightgray;
                color: black;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-2:hover {
                background-color: white;
                color: black;
            }
            
             #text-3{
                background-color: black;
                color: white;
                width: 500px;
                
                padding: 0px, 50px;
                position: absolute;
                left:200px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-3:hover{
                background-color: white;
                color: black;
            }
            
            #text-4 {              
                background-color: lightgray;
                color: black;
                width: 500px;
                padding: 0px, 50px;
                position: absolute;
                left: 700px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-4:hover {
                background-color: white;
                color: black;
            }
            
            #text-5 {              
                background-color: lightpink;
                color: black;
                width: 100%;
                padding: 0px, 50px;
                position: fixed;
                top: 200px;
                text-align: center;
                
            }
            
            #text-5:hover {
                background-color: white;
                color: black;
            }
        
            a:link{
                text-decoration: none;
                color: inherit;
            }
            
            a:visited{
                text-decoration: none;
                color: inherit;
                
            }
            
            .box-1 {
                background-color: beige;
                color: black;
                width: 500px;
                height: 100px;
                position: relative;
                left: 100px;
                top:300px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                padding-left: 20px;
                padding-right: 20px;
                z-index: 1;
            }
            
            .box-2 {
                background-color: lightgreen;
                color: black;
                width: 200px;
                height: 100px;
                position: relative;
                left: 300px;
                top: 250px;
                padding: 20px, 20px,20px, 20px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                z-index: 0;
            }
    <html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>

        
        
        
    </head>
    
   
    <body>
        <div id="text-1">
            <a href="index.html" target="_blank">
                <p>Experimenting with one paragraph</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>
        </div>
        
        <div id="text-2">
            <a href="index.html" target="_blank">
                <p>Another chunck of text</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>    
        </div>
    
        <div id="text-3">
            <a href="index.html" target="_blank">
                <p>Button 3</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>
        </div>
        
        <div id="text-4">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>    
        </div>
        
        <div id="text-5">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
            </a>    
        </div>
    
        <div class="box-1">
                <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
        </div>
        
        <div class="box-2"></div>
                      
    </body>
</html>

Upvotes: 0

Views: 227

Answers (1)

Roopesh
Roopesh

Reputation: 101

Do you want like this?

body {
    margin: auto;
    max-width: 4000px;
    height: 5000px;
    font-family: "Lato";
}
#text-1{
    background-color: black;
    color: white;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-1:hover{
    background-color: white;
    color: black;
}

#text-2 {
    background-color: lightgray;
    color: black;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-2:hover {
    background-color: white;
    color: black;
}

 #text-3{
    background-color: black;
    color: white;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left:10%;
    top: 110px;
    text-align: center;

}

#text-3:hover{
    background-color: white;
    color: black;
}

#text-4 {              
    background-color: lightgray;
    color: black;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left: 50%;
    top: 110px;
    text-align: center;

}

#text-4:hover {
    background-color: white;
    color: black;
}

#text-5 {              
    background-color: lightpink;
    color: black;
    width: 100%;
    padding: 0px, 50px;
    position: fixed;
    top: 200px;
    text-align: center;

}

#text-5:hover {
    background-color: white;
    color: black;
}

a:link{
    text-decoration: none;
    color: inherit;
}

a:visited{
    text-decoration: none;
    color: inherit;

}

.box-1 {
    background-color: beige;
    color: black;
    width: 500px;
    height: 100px;
    position: relative;
    left: 100px;
    top:300px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
    margin: 0;
}

.box-2 {
    background-color: lightgreen;
    color: black;
    width: 200px;
    height: 100px;
    position: relative;
    left: 300px;
    top: 250px;
    padding: 20px, 20px,20px, 20px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    z-index: 0;
}
.box-1 > p{
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
    <div id="text-1">
        <a href="index.html" target="_blank">
            <p>Experimenting with one paragraph</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>
    </div>

    <div id="text-2">
        <a href="index.html" target="_blank">
            <p>Another chunck of text</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>    
    </div>

    <div id="text-3">
        <a href="index.html" target="_blank">
            <p>Button 3</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>
    </div>

    <div id="text-4">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>    
    </div>

    <div id="text-5">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
        </a>    
    </div>

    <div class="box-1">
        <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
    </div>
    <div class="box-2"></div>
</html>
</body>
</html>

In the 2nd row divs are aligned at the center by specifying width of #text-4 and #text-5 to 40% , left of #text-4 to 10% and left of #text-5 to 50%. P tag inside #box-1 is aligned inside #box-1 by setting it's position absolute

Upvotes: 1

Related Questions