Member Avatar for dany12

How can I put it next to entry blog on right without using margin:-3900px;?

  • 3 Contributors
  • 3 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

Negative huge margins like -3900px are a brittle hack and will break as soon as content, padding or the viewport changes. and were pointing toward side-by-side layouts — instead of re-creating their examples, try a modern layout method that avoids float/inline-block quirks and is easier to debug: Flexbox (or Grid) for the container plus a couple of small safeguards.

.page-wrap {
  display: flex;
  align-items: flex-start;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

.sidebar {
  flex: 0 0 300px; /* choose a sidebar width */
  box-sizing: border-box;
}

Use min-width: 0 to prevent long unbroken content or large images from forcing the main column wider. box-sizing: border-box keeps padding inside the declared width. See MDN for details: Basic concepts of Flexbox and box-sizing.

If you must keep the old float approach, ensure the wrapper clears floats (so it contains floated children) with a clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Debug checklist: open DevTools and inspect computed widths; temporarily add colored outlines or backgrounds to find overflowing elements; look for fixed/inline widths on images or widgets; confirm the content and sidebar are siblings inside one wrapper; verify a standards DOCTYPE is present. For small screens, stack columns with a simple media query:

@media (max-width:720px) {
  .page-wrap { flex-direction: column; }
  .sidebar { order: 2; width: auto; }
}

For : try the Flexbox wrapper first and use the inspector to spot the single element causing overflow — that is usually the real reason the sidebar drops or the layout “explodes.”

Recommended Answers

All 3 Replies

Member Avatar for hericles

Well, you can place two divs side by side if you use this CSS rule on both and the widths combined aren't too wide for the containing element.

display: inline-block;

Other use float: right; on the div you want on the right. Float can have some unexpected effects though depending on the page structure.

Member Avatar for JorgeM

I wouldnt suggest that you use the margin properties for that purpose. The problem with using the margin property in this way is that you'll have all sorts of unexpected display issues (elements shifting) especially when you do not have a "wrapper" div that is centered in the middle of the page.

You can have divs line up against each other traditionally using the float property such as:

#div1 {float:left;width:50%}
#div2 {float:right:width:50%}
Member Avatar for dany12

Take a look at my website I used float an not results just this mess
Thank you for your help

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.