Member Avatar for dylank

Hey DaniWeb!

I'm having a small problem with my HTML DIV positioning, and was hoping you could help me. I cannot get my DIV's to float against each other in a column format. They just want to go down on the page, which is not the look I am attempting. I have read the Learn CSS Positioning in Ten Steps article @ http://www.barelyfitz.com/screencast/html-training/css/positioning/, but this does not help a big amount.

In short Column A and Column B should be in the same row (if that makes scene).

Here is the webpage on my server:

Thanks!

  • 2 Contributors
  • 2 Replies
  • 108 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by dylank

Dani AI

Generated

Brief summary and practical follow-ups: the symptom described (two DIVs stacking instead of appearing side-by-side) is common when elements are left as normal block boxes or when their computed widths/margins exceed the container. was right to steer away from a fixed height and toward letting the layout size naturally or be contained — that change matching 's follow-up that it helped. Below are modern, reliable approaches and quick checks to avoid the same problem in other pages.

Common causes and quick checks

  • Inspect computed widths and box model in DevTools. The sum of widths + padding + borders + margins must fit inside the parent.
  • Verify display and formatting context: block elements stack; float/inline-block/flex/grid create side-by-side flow.
  • Fixed heights can mask overflow and make containment awkward; prefer auto height or a layout that naturally stretches.
  • If floats are used, ensure the parent contains them (clearfix or containment) so layout sizing behaves predictably.

Simple, modern examples (not same code shown earlier)

/* Flexbox parent + columns */
.row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.col {
  flex: 1;           /* share available space */
  min-width: 0;      /* prevents flex overflow */
  box-sizing: border-box;
}
/* Float fallback + clearfix */
.col { float: left; width: 48%; margin-right: 4%; box-sizing: border-box; }
.col:last-child { margin-right: 0; }
.row::after { content: ""; display: table; clear: both; }

Debug checklist and reading

  • Toggle the parent display (block → flex) in DevTools to see instant differences.
  • Temporarily add background colors to each box to visualize overflow and wrapping.
  • Read MDN for details on modern layout and box sizing: Flexbox guide and box-sizing.

These steps preserve content flow and make multi-column layouts robust across screen sizes — a cleaner approach than absolute positioning for typical column layouts.

Recommended Answers

All 2 Replies

Member Avatar for ko ko 
div#div1-b {
	position:absolute;
	top:0px;
	right:0px;
	width:75%;
	height:200px;
}

Remove 'height: 200px' with 'height: auto'. Or use 'overflow' property to control the overflow contents.

div#div1-b {
         /* This declaration hide the overflow contents */
         overflow: hidden;
         /* This declaration show the overflow contents */
         overflow: visible;
         /* This declaration will show with the scrollbar when the contents are flow out of layer */
         overflow: auto;
}

Good luck..

Member Avatar for dylank

OK, thanks! This works (fairly) well now, and I will possibly be trying other things with this.

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.