Member Avatar for manishempire

I am having a problem with a div in my page which is set to floating on right side which works good in Chrome but in IE and firefox its not showing properly. Here is the and the css code is

#sidebarsms {
	float:right;
	width:200px;
}

Please help me as soon as possible thank you :X

  • 3 Contributors
  • 5 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Common causes for a float that looks OK in Chrome but breaks in Firefox/IE are invalid markup, the float not being contained by its parent, or width/margin math that overflows the wrapper. Since could view the sidebar correctly while others report problems, reproduce the layout in a minimal HTML file (no third-party scripts or ads) and validate the markup with the W3C validator (validator.w3.org) to catch unclosed tags or stray elements.

Floats must be contained by their parent. Add a modern clearfix to the wrapper so the wrapper expands around floated children:

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

Apply that class to the container holding the content column and the sidebar. overflow:auto on the parent can also contain floats but may introduce scrollbars; see the clearfix pattern at CSS-Tricks.

Check the width math: main-column width + sidebar width + horizontal margins/borders/padding must be less than the wrapper width. If the design is tight, use box-sizing: border-box to simplify calculations (MDN box-sizing). If a popout/hover menu (as mentioned) changes visible width on hover, make the popout absolutely positioned so it does not push other elements.

For browser-specific quirks: older IE may need hasLayout triggered (e.g., zoom:1) on the container. Also investigate injected scripts or ad redirects (the redirect noticed) by testing with extensions and third-party scripts disabled and by watching the Network tab in DevTools. If the problem persists, compare cross-browser screenshots and a minimal reproducible HTML/CSS example to pinpoint the difference.

Recommended Answers

All 5 Replies

Member Avatar for ccube921

1. How should it be floating?

2. Unwanted opinion: the popout menu is not good; users need bigger buttons and text, so they know where they are going w/o hovering over e/t.

Edited by ccube921 because: n/a
Member Avatar for manishempire

1. How should it be floating?

2. Unwanted opinion: the popout menu is not good; users need bigger buttons and text, so they know where they are going w/o hovering over e/t.

I am not getting what do you want to say:-/

Member Avatar for teedoff

I think he means what are you expecting the sidebar to do. It looks fine to me in IE8, but again, not sure where you are expecting it to be. When I viewed it, it was just to the right of your main content.

Also, the second time I clicked to view your site, it took me there fro a second, then took me to another site. Is this what's suppost to happen?

Personally I hate going to site and then getting whisked away to another site.

Member Avatar for manishempire

I think he means what are you expecting the sidebar to do. It looks fine to me in IE8, but again, not sure where you are expecting it to be. When I viewed it, it was just to the right of your main content.

Also, the second time I clicked to view your site, it took me there fro a second, then took me to another site. Is this what's suppost to happen?

Personally I hate going to site and then getting whisked away to another site.

Ya it is supposed to be on right side of the content but its having problem in firefox and you get which side and from clicking which ling please tell me

Member Avatar for teedoff

Again, I checked it in IE8 and Firefox and dont see the problem. Noth browsers are floating the sidebar to the right of the main content. I tried a link as well and it worked. You might need to be more specific about what you see as a problem. Capture a screenshot of how you think or want it to look, then we can compare it to how it looks now.

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.