Member Avatar for lemur

Hi there,

i need to move "follow us on:" div tag at the same level like "useful information". and remove the color border around img.

any hint???


thanks.

  • 2 Contributors
  • 3 Replies
  • 90 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by blocblue

Dani AI

Generated

wanted the "follow us on:" block moved beside "useful information" and to remove the colored border around the social icons. rightly flagged that the social icons were not inside the intended wrapper — that plus using an inline layout can make the footer’s background seem to vanish because the parent stops growing to contain its children.

First, check the HTML in the browser inspector: confirm the social icons are actually inside the "follow us" div and that all tags are closed. If the icons are siblings that were taken out of the container by a layout change, put them back as direct children of the footer area you expect.

If the parent appears to collapse (background image disappears) use one of these non-destructive fixes:

  • Add a simple clearfix to the parent so it automatically contains floated/inline children:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Or establish a new formatting context on the parent (modern, robust):
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • A quick alternative is overflow:auto on the parent, but be cautious: that can clip visible overflow like shadows.

To remove the border around linked images, target the images with CSS (prefer a img so only linked images are affected):

a img {
  border: 0;
  outline: none;
}

Test in the browser developer tools after each change. If the background still “disappears,” inspect computed heights on the parent and verify which rule is collapsing it. For reference on these layout patterns, see the clearfix tips at CSS-Tricks and the Flexbox guide at MDN:
Clearfix snippet
Flexbox basics

Recommended Answers

All 3 Replies

Member Avatar for blocblue

Make them float:left and float:right respectively, and display:inline, or add a fixed width if using display:block;

Member Avatar for lemur

Make them float:left and float:right respectively, and display:inline, or add a fixed width if using display:block;

but at the same time in footer div tag there shoudl be background-image: url(img/dots_horizontal.png); and it s disapear when i m did like u said.

Member Avatar for blocblue

Your follow us content isn't in the follow us div. Adding float right to the useful info div doesn't make the background disappear in Firefox. I can't modify the styles on the fly in IE6/7/8/9, so cannot test them. I would expect Opera, Safari and Chrome to all be fine though.

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.