/    Sign up×
Community /Pin to ProfileBookmark

Positioning elements in CSS

Copy linkTweet thisAlerts:
Jun 09.2021

Hi, I am currently learning CSS and I haven’t finished the course yet, I couldn’t wait to start building a project, it looks good and it even has some cool animations, but the confusing thing for me now is the placing or shaping or positioning of elements.
In my project, there are 3 elements, one inside the other, I use margin left and margin right and set the same number of pixels on each side to center my element (also in HTML, I put divs in correct order) and it’s all centered, but is it better to use width and height? and find a way to center the element like using margin:auto?

Thanks in advance for the answers.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@omotovhJun 10.2021 — Read about CSS position: static, absolute, fixed, relative and sticky. You can also use float for positioning as in

.div {

float:right

}

You can also Flexbox and Grid for positioning. It all just depends on exactly what you are trying to achieve. However using margin for positioning is going to cause serious problems for you when you're trying to make it responsive to various screen sizes. It's also advisable to use relative units of measurements like rem, em, vh,vw instead of px because they're responsive units.

Thanks.
Copy linkTweet thisAlerts:
@johncarryJun 10.2021 — position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

div.static {<br/>
position: static;<br/>
border: 3px solid #73AD21;<br/>
}
Copy linkTweet thisAlerts:
@Hoop11authorJun 10.2021 — @omotovh#1632757 Thanks for your answer.

Yes, I noticed that it isn't responsive so I guess that people never use margin to position elements. I am gonna dive into the responsive design part of the course I am taking, Thank you.
Copy linkTweet thisAlerts:
@Hoop11authorJun 10.2021 — @johncarry#1632772 It looks positioned though when you use margin, but the problem is that it isn't responsive. Thank you.
Copy linkTweet thisAlerts:
@omotovhJul 09.2021 — @Hoop11#1632780 you can't do responsive web design with margins unless you use media queries. Your best bet for responsive designs are grids and flexbox.
×

Success!

Help @Hoop11 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...