Positioning divs with Top, Right, Left, and Bottom Properties

Positioning divs with Top, Right, Left, and Bottom Properties
0

#1

I was just wondering if it was ‘a good idea’ to position divs using the top, left, right, and bottom properties.

I ask because I’ve never seen it done before. I’ve seen floating and a few grid systems but they seem sort of complicated. I just got the idea of positioning now and it seems like it could solve my div positioning problems. Also, it seems useful for javascript manipulation of divs. Why don’t more developers do this? Is there a flaw I don’t know about?

Thanks in advance for your response.


#2

Sometimes. Positioning tends to be one of the most fragile things in CSS, which is one reason why people try to avoid methods that require hardcoding, or doing your own calculations.


#3

Could you elaborate on what you mean by fragile?


#4

It’s usually not a good idea, specially position:absolute as it removes the element from the flow and can totally mess up the position of everything else.

It’s a great tool but you should really, and I mean REALLY understand the theory behind it before trying to apply it. Otherwise, it’s probably the easiest thing to break in CSS


#5

“Fragile”, meaning it breaks easily. As @facundocorradini described above.


#6

Thanks for the information. Do you recommend any source where I can read up on this more? Or should I perhaps just learn exactly what you mean by trial and error?


#7

I think techsith video is a good intro to the issue, but you should totally read the actual specification too.

Then it’s all about experience and trial and error. Specially error.


#8

Thanks for the information.


#9

Grids shouldn’t be positioned with left, right, top, and bottom. Traditional grids will be based on float, and modern grids are based on flexbox. Soon many will work with CSS grid.

Using Javascript for positioning has some problems like:

  • Since JS typically loads after CSS, you run into issues. The page will initially position based on CSS, and then reposition when JS loads. This causes a jerky movement and is bad UX.

  • Handling page resizing with JS layouts can be a headache. CSS based media queries are much easier to work with than resize events.

  • Now you have divided the styling of your page to 2 places which is confusing, especially for developers that may be new to the project

All in all, it should be avoided. This isn’t always possible though, sometimes you need the extra firepower that JS provides. For example, foundation wrote a JS plugin just to equalize the height of divs in their grid: https://foundation.zurb.com/sites/docs/equalizer.html. But since Flexbox came out, this is no longer necessary!

All that being said, I still feel that the left, right, top, and bottom properties are very useful - just not for grids! Specifically used with position: absolute, these properties can be used to break the page layout and set divs behind and in front of each other. This pen is a good example of this: https://codepen.io/RadDog25/pen/ZvxREQ

I feel like these properties should be in the toolkit of any front end developer, but as @facundocorradini mentioned, you can break things if you don’t have a good handle on how they work!


#10

I use the positioning, and margin css in conjunction with @screen size in certain bootstrap layouts to fine tune the layout on the smaller screens. Boot strap is not really that complicated once you understand how it works. the col css goes inside row css that is inside a container div. the container is usually fixed. with a fixed width, with a little padding, some people use the container-fluid on the outside and that is not really the way it supposed to be programmed. each section is supposed to be in fixed containers (brand, nav, container. footer) because they set:

 "[email protected]" instead of "width=100%

in fixed containers.
the row tag defines the row, the default size relation, of colums per row are set with this css set, by default its 12 column units, but you can change that, by compiling your own bootstrap source on thier website.

col-* css is just fixed heights and different padding whether they are xs, sm md lg or xl

hopefully that will help you understand bootstrap better.

oh btw the code in equalizer js is very similar bootstrap.js