Position & centering <div>

[Est]

Hi all, i am learning html and css from 3wschool, and i am a little lost.
i have read all html and css tutorial section and really dont know why i dont understand,
thanks for your help & time.

Right now i am trying to understand how place some <div> where i want in the page.
as you can see i have made 2 div (objects) that will contain things
i want be able to place them in everywhere in the "main zone". (or any zone)

?) I cant get my objects centered in the div
?) there is a way to place a div to 100px on the right ( without use margin or padding )
?)Am i in error, if i think to use div as a box sistem to place things where i want?
?) can someone make a "card" with all the useful  and usable div things ?
the site talk only about the align attribute and its not supported by html5.. https://www.w3schools.com/tags/tag_div.asp  

Searching for a solution i found out this site https://css-tricks.com/centering-css-complete-guide/
They use a line of code i didnt find on 3wschool, did i miss it?
There they use .child {· position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}

i am also pretty confused by  https://www.w3schools.com/cssref/playit.asp?filename=playcss_position
i attach a screenshot of his behaviour , it is right? if it is i am fully lost.

[dsonesuk]

You should only use positioning (position:) for overlaying purposes over other elements. Centring requires a non floated block element with a defined width using margin: 0 auto; OR display: inline-block; with its parent container using text-align: center; as a element using display: inline block acts similar as text would in a block element paragraph.

Use float: left/right; to position elements left or right, along with margin, or padding for positioning purposes.

[webtrickshome]

seems like you are planning a large container in the middle leaving equal spaces on each side. Do this.

<div class="main-container">

</div>

<style>

     .main-container{

             width: 80%;

             margin: auto;

}

</style>

This will give you a div with 80% width of the screen size automatically placed in the middle. Now, you can create three separate divs inside that main-container to place contents on different sides which looks like:

<div class="main-container">

       <div class="box"></div>

       <div class="box box-middle"></div>

       <div class="box box-last"></div>

</div>

Now, add some styles to these divs.

<style>

.box{

     width: 30%; //this will make all three boxes of equal width

     float: left; // this will make all three boxes float to the left leaving the rest 10% space empty on the right end

}

.box-last{

      float: right; // this will make the last box float to the right overriding the earlier float property and shift the 10% empty space between the second and last box.

}

.box-middle{

     margin-left: 5%; // this will shift the middle box to the right leaving 5% of the empty space on the left which will make the other 5% empty space remain on the right and give a view of                                            equal spacing among those boxes.

    text-align: center; I added this as it seems like you want the objects in the middle div to be centered.

}

</style>

 

Edited July 27, 2018 by Ingolme
Advertising