Jump to content
Est

Position & centering <div>

Recommended Posts

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.

Test Layout.jpg

test position.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Ingolme
Advertising

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...