Member Avatar for dineshswamy

i m new to coding a style sheet by hand.i did a website with positioning all the elements by adjusting their margins,some settles in the desired place automatically.now , i use
absolute positioning, but for this i need to arrange each and every element . i do not know
what is the best practice for positioning a element ? help me out....

  • 3 Contributors
  • 2 Replies
  • 118 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Lorel

Dani AI

Generated

— manual margin fiddling and lots of absolute placement will work on one screen size and break on the next. and pointed out those problems; the practical path forward is to stop treating layout as pixel-by-pixel placement and adopt layout systems that adapt to different viewports and engines.

Start by structuring the page with semantic wrappers and let the browser do most of the work. Modern CSS layout modules (Flexbox and Grid) give predictable, maintainable control over rows, columns and alignment without chasing margins. Also use a consistent box-sizing model so padding and borders don’t break widths during adjustments.

A minimal Flexbox pattern that works well for responsive columns:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.col {
  flex: 1 1 220px;
  min-width: 220px;
  box-sizing: border-box;
}

Migration checklist: identify the main regions (header, nav, content, sidebar, footer); replace absolute-positioned blocks with a parent layout (Grid for page-level two/three-column layouts, Flexbox for linear groups); add media queries for breakpoints and let columns stack naturally; test at different zoom levels and on real devices. Keep absolute positioning only for overlays, tooltips, and UI controls that must sit on top of content.

For browser compatibility, check feature support on Can I Use and rely on build tools (Autoprefixer) if you need to smooth vendor differences. For concise, implementation-focused reading see the MDN guides on Flexbox and Grid and the box-sizing reference:
Learn Flexbox on MDN
Learn Grid on MDN
box-sizing reference
caniuse — Flexbox | caniuse — Grid

Recommended Answers

All 2 Replies

Member Avatar for hericles

Absolute positioning can be a real headache, particulary with resizing the browser window. You should be able to use position: relative to position child elements within their parent with few problems. You will still get some movement between the browsers though.
Are you using a CSS browser reset to clear out all margins and paddings before you begin? That can help.

Member Avatar for Lorel

You can center a web page by applying "margin:auto 0 auto 0;" to the main page div, and then float other content within it. If you have two or more boxes across the page float each one to the left and apply left or right margins to each to position them exactly where you want them. You have to make sure that the box width plus each margin is a little bit less than the page or the last one will wrap to the next row.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.