42068

Floating div issue in IE

Question:

Further to <a href="https://stackoverflow.com/questions/8990246/frame-like-in-html/8990407#8990407" rel="nofollow">https://stackoverflow.com/questions/8990246/frame-like-in-html/8990407#8990407</a> I implemented floating divs in my JSP. It works properly in firefox but not in IE

This is how I placed the div

<div id="div2"> <font class='passageNumber'>Passage II</font> <font class='passageText'> <center> <font class='title'>What does Millie hope for? </font> </center> <br /> TEST PASSAGE </font> </div>

The CSS i used is

#div2, #div3 { overflow: auto; float: left; height: 450px; } #div2{ display:inline-block; width: 50%; } #div3 { display:inline-block; width: 50%; }

U can see the allignment in the attached image <img alt="SCREEN SHOT" class="b-lazy" data-src="https://i.stack.imgur.com/915st.png" data-original="https://i.stack.imgur.com/915st.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Whereas the same works fine in firefox.

but in IE the "passage II" text comes down and if the passage is big, double scroll bar is appearning. Please help

Answer1:

Not to do the work for you, but I'd suggest using HTML which has a better connection with current standards and trends to provide a more solid and stable solution.

I'd first construct the div which would contain everything that you'd float, then add the elements into that, using appropriate mark-up for those elements:

<div id="div2"> <div class='heading'>Passage II</div> <div class='passageText'> <div class='title'>What does Millie hope for?</div>

TEST PASSAGE

</div> </div>

...and for your CSS I might try:

.div2 { float: left; width: 400px; height: 300px; } .heading { font-size: larger; font-weight: bold; } .passageText { font-family: Arial, sans-serif; } .title { text-align: center; }

Just keep it neat, relevant and well constructed, and you should dodge these annoyances quite successfully - most of the time! Hope this helps...

<em><strong>EDIT:</strong></em>

If you have no control over the HTML, and that's the way it's just formatted, I might also try adding the display: block; attribute / value to the style sheet to make it behave more like a div element. In general, with the code you provided, block-level displaying of those elements wouldn't ruin the structure at all:

font { display: block; }

I would try and see if I could maybe neaten up that HTML though!

Recommend

  • Responsive CSS div positioning priority
  • how to align divs vertically in html and css?
  • How can I fill all space of a div 100% with 3 divs with the same size?
  • Zend Framework 2, Module Redirect
  • Why does PHP appear to evaluate this condition incorrectly?
  • OpenOptionsMenu not working with ActionBarSherlock Custom SubMenu
  • ONLY Visible Div form elements will get submitted
  • Contact form problem - I do receive messages, but no contents (blank page)
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • I don't get what's the difference between format() and … (python)
  • How do i disable a text box within an iframe
  • Can I use Jquery to automatically find and set the width and height of a variety of images?
  • Zeromq with python hangs if connecting to invalid socket
  • Get the last date of each month in a list of dates in Python
  • How to define an array of floats in Shader properties?
  • Receiver has no segue with identifier“***”
  • Scala: Function returning an unknown type
  • in batch how do i use taskkill properly
  • Hibernate to update table schema
  • Clear activity stack before launching another activity
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Jackson Parser: ignore deserializing for type mismatch
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Refering to the class itself from within a class mehod in Objective C
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • formatting the colorbar ticklabels with SymLogNorm normalization in matplotlib
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to check if every primary key value is being referenced as foreign key in another table
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • python regex in pyparsing
  • To Get the radio button value in ruby on rails