Member Avatar for rohitrao

While working with div and css.. please let me know how this is possible...

If we have a HTML layout with divs... and i want to swap the leftnav and the main content area, how can i do that using CSS and the HTML

Is there a way possible, that i swap the positioning without disturbing the CSS.

Let me know..

Really need it!!!!

Thanks,
Rohit

  • 4 Contributors
  • 5 Replies
  • 108 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by wendell00741

Dani AI

Generated

asked how to swap a left navigation and the main content using CSS/HTML. , and offered quick ideas (change markup, watch floats/margins, or use absolute positioning). Here are practical, modern approaches that avoid breaking layout and explain tradeoffs.

Use Flexbox to change the visual order without touching the HTML source. Keep the main content first in the DOM for semantics and accessibility, then change visual order with order. Example:

HTML

<div class="wrap">
  <main class="main">...</main>
  <aside class="nav">...</aside>
</div>

CSS

.wrap { display: flex; }
.nav  { order: -1; } /* shows nav before main visually */

See Flexbox basics and the order property for details: Flexbox basics (order).

For more explicit two-column layout control, CSS Grid with named areas is another clean option. Define grid-template-areas and switch the areas to swap positions without rewriting markup.

Avoid position: absolute for this if you want a responsive, maintainable layout — absolute removes items from normal flow and often causes overlap and accessibility issues. If supporting very old browsers, you may need a float-based fallback or simply change markup order on the server.

Quick troubleshooting: test changes in browser DevTools, check keyboard/tab order and screen-reader output (most assistive tech follows DOM order), and confirm widths/margins are reset when switching display models. For more on source vs visual order, see .

Recommended Answers

All 5 Replies

Member Avatar for Smiley012

try and swap the divs around, u'll probably need to edit your padding etc, but it shouldnt be too difficult!

Member Avatar for rohitrao

try and swap the divs around, u'll probably need to edit your padding etc, but it shouldnt be too difficult!

Hmm... ok i'll give that a try...

Thanks anyways.. :)

Member Avatar for rudevils

if u using css, you must change it first
atribute like "float, padding, margin, etc" will affect your layout

so you can't just swap it in your html code, u need to change your css first

Member Avatar for rohitrao

if u using css, you must change it first
atribute like "float, padding, margin, etc" will affect your layout

so you can't just swap it in your html code, u need to change your css first

Yeah!!! i got it.. it works... Thankyou.. :)

Member Avatar for wendell00741

if you use CSS try to work with the Attribute Position:absolute;
then the margin.

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.