Member Avatar for ljCharlie

I've got problem. Here's what it looks like, . The div #sidebar-b should not be that far from the #sidebar-a or Part# 1. They should only be 50px appart from each other.

Any help is appreciated.

  • 2 Contributors
  • 4 Replies
  • 128 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

Brief note tied to the replies from and : the symptom (one sidebar sitting much farther away than expected) is a flow/float problem. A nearby block-level element (often an image) can take up space in the same flow so the second panel ends up positioned relative to that element instead of the first panel. Grouping the two panels in a wrapper is the right idea because it gives you a single containing block to control floats, spacing and clearing.

A practical CSS approach that keeps things simple and predictable:

/* wrapper contains floats */
#sidebars {
  overflow: hidden; /* quick float containment */
}

/* two sidebars side-by-side; use one margin to create the 50px gap */
#sidebar-a, #sidebar-b {
  float: left;
  width: 200px; /* adjust to your layout */
}
#sidebar-a {
  margin-right: 50px; /* the gap you want */
}

If you prefer a robust clearfix instead of overflow, add this helper to the wrapper:

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

Modern alternative (simpler, avoids float quirks):

#sidebars {
  display: flex;
  gap: 50px; /* exact spacing between the two panels */
}
#sidebar-a, #sidebar-b { flex: 0 0 200px; }

Troubleshooting checklist: use the browser inspector to examine computed margins and floats; temporarily add colored borders to each element to see which one is causing spacing; ensure the sum of widths + margins fits the parent width (otherwise floats will drop); if supporting old IE, add zoom:1 to the wrapper to trigger hasLayout. For background reading on how floats and clearing work see the MDN overview on floats (https://developer.mozilla.org/en-US/docs/Web/CSS/float) and the micro-clearfix explanation (https://nicolasgallagher.com/micro-clearfix-hack/).

Recommended Answers

All 4 Replies

Member Avatar for peter_budo

I've got problem. Here's what it looks like, . The div #sidebar-b should not be that far from the #sidebar-a or Part# 1. They should only be 50px appart from each other.

Any help is appreciated.

Well your sidebar-b is not related by 50px to sidebar-a but to your image face.gif!!! You can see that if you change margin to 0px
I would recomend to you use table or posittionig

Member Avatar for peter_budo

OK, I just played with it little bite and came with effective solution.

You have to put both sidebars in container "div" as followed

[B] <div> [/B]
<DIV id=sidebar-a>
<P>Part# 1</P>
<P>Welcome to the LorResident service. At the LorResident we provide the 
following services: </P>
<P></P>
<UL>
  <LI class=SmallestText>1 
  <LI class=SmallestText>2 
  <LI class=SmallestText>3 </LI></UL></DIV>
<DIV id=sidebar-b>
<P>Part# 2</P>
<P>Zoo siab txais tos nej rau hauv LorResident (Tsev Neeg Lauj). Nyob rau hauv 
LorResident peb muaj kev pab raws li nram no: </P>
<P></P>
<UL>
  <LI class=SmallestText>1 
  <LI class=SmallestText>2 
  <LI class=SmallestText>3 </LI></UL></DIV>
[B] </div> [/B]

than rest of the code

<DIV id=content>
<P align=center><IMG height=101 src="lorresident_files/pcSupport.gif" 
width=166></P>
<P align=center><IMG height=101 src="lorresident_files/web.gif" width=166></P>
<P align=center><IMG height=101 src="lorresident_files/video.gif" 
width=166></P></DIV>
<DIV id=sidePic>&nbsp;<IMG height=399 src="lorresident_files/face.gif" 
width=315></DIV>

Simple solution, just time to time its take me little longer :o

Member Avatar for ljCharlie

Thank you very much! I'll give that a try. By the way, why do I need the extra div container to hold those two divs?

Again, thanks!

Member Avatar for peter_budo

To keep them as one complex, so the settings for second sidebar does apply to firstone and not to somthing else.

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.