Tips for positioning 2 divs side by side using Internet Explorer 8

Trying to display two div's next to each other is causing issues in IE. Normally, this isn't a problem with other web browsers. However, the layout seems to be messed up and I'm pointing out the issue using red squares:

The div on the left has the class "head_narrow" and the image has the id "branche_header_image". Here's how my CSS is set up:

.head_narrow {width:380px; float:left;}
#branche_header_image {float:right;}

I've made sure that the combined width of both divs is smaller than the wrapper's width. Can anyone figure out what's happening?

htmlcsscss-float

Answer №1

In order to adjust the size, consider adding "width" within this identifier #branche_header_image {width:400px; float:right;}

Alternatively, you can utilize

display:inline;

for both divisions rather than relying on float.

Answer №2

If you're looking for a more stylish solution, consider arranging them as inline blocks within a container div. However, if floats are necessary, position separate divs above and below the two floating elements with style="clear: both;".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

Having trouble retrieving the src of images in the class "KfFlO" using selenium. Whenever I try to print for the source, Python keeps returning "none." Can anyone help me identify the problem? Below is my code snippet: from selenium import webdriver from s ...

pythonhtmlimageselenium-webdriverweb-scraping

Chrome not displaying transition effects after the page has finished loading

I've encountered an issue with a hidden div that is supposed to show on page load with a transition. While it works fine in Firefox, Chrome seems to be struggling to display the div. If you'd like to try it out yourself, here's the link for ...

jquerycssgoogle-chrometransition

Enhancing Image Quality in Internet Explorer 10

Here is my current situation: I am working on a web page with a responsive design. The layout of the page consists of two vertical halves, and I intend to display an image (specifically a PDF page converted to PNG or JPG) on the right side. The challenge ...

htmlcssimageinternet-explorer-10interpolation

What is the trick to concealing a div on a webpage through the addition of a designated parameter to the URL?

As a newbie blogger delving into the world of HTML, my knowledge of JavaScript is quite limited. I am eager to find out how I can hide any div on a webpage simply by adding a parameter to the URL; for example, if I were to add ?hide=header-wrapper at the e ...

javascriptjqueryhtmlcsshide

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

javascriptcssbootstrap-4aurelia

Eliminate unnecessary white space on your webpage using CSS with the 960.gs grid system

As I work on building my portfolio website from scratch, I came across a CSS framework known as "960.gs". While I have experience with similar tools, this is my first time delving into a pure CSS framework, so I'm feeling a bit out of practice. Here ...

htmlcss960.gs

Use ajax request to serialize input into HTML value

I implemented a jquery.ajax post request to send data to the server using C#, however, I encountered an error with my code. Here is the code snippet: $(function(){ $('#frmSubmit').on('submit', function(e){ e.preventDefault(); ...

javascriptc#jqueryhtmlajax

Achieving centered positioning for the 'row' class in Foundation 5, regardless of browser size

While viewing on desktop, the body is centered which is ideal. However, resizing the browser causes it to stretch to fit the full width and I want to avoid this. Regardless of the browser size, I want the first div with the "row" class to be centered with ...

htmlcsszurb-foundation

The background image is failing to load

Why isn't my background image showing up? Check out the jsFiddle here CSS Styles .arrow_icon { display: block; width: 320px; // 25 height: 240px; // 25 background-image: url(http://s12.postimg.org/yi7yl766z/5b8nbn.jpg); backgrou ...

htmlcssbackground-image

Transforming an HTML5 game into a native mobile application

I'm currently working on creating a HTML5 game. While I find HTML5 to be the most user-friendly programming language, I am facing an issue. I want my game to run as a native application on desktops (Windows, Mac, and Linux) rather than in a web browse ...

javascripthtmlnative

Unable to locate a specific div element using Selenium in Python, encountering a NoSuchElementException

Hello, I'm new to Python and still learning the ropes. Currently, I am attempting to locate something on a particular website. Here is what I'm looking for: <div class="price">$ 1.67<span class="discount">-19.71%&l ...

pythonhtmlselenium-webdriverfetch

Tips on how to display a gif image during the loading of ajax content using JavaScript

Currently, I am attempting to load a gif image while waiting for the AJAX data to be loaded and displayed. However, I am struggling with this task. I would appreciate any assistance on how to implement a loading gif in my code for the advanced search feat ...

phpjavascripthtmlcssajax

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

htmlcssnpmsass

Retrieve the Latest Information from the Asp.Table

My table setup is as follows: <asp:Table ID="model" runat='server'> <asp:TableRow> <asp:TableHeaderCell class="col-xs-2"> Name </asp:TableHeaderCell> <asp:TableHeaderCell class="col- ...

javascriptc#htmlasp.net

Issue with Bootstrap dropdown not appearing properly when switching between screen sizes

I am currently working on converting a side navigation in bootstrap to a dropdown when the window is resized. However, I am experiencing an issue between the medium and small screen sizes where for a few pixels, nothing is shown. The side navigation disapp ...

htmlcsstwitter-bootstrapresponsive-designnavigation

Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...

cssasp.netasp.net-mvcpdfpdf-generation

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

phpcsstwitter-bootstrapjoomlaaffix

Obtaining an attribute of a row in a table using Selenium and Python

I've been trying to figure out how to check if this button (image) has been clicked: https://i.sstatic.net/Nc3Pe.png It's crucial for me to interact with this button, as it allows me to modify the price of certain items and protect them when ne ...

pythonhtmlseleniumselenium-webdriver

Need a clearfix solution for Internet Explorer 6/7?

While developing a website, I have come across the micro clearfix hack from here. It's working well, but I do have a question regarding it that I'd like some clarification on. Within the clearfix hack on the webpage, there is the following code ...

csscss-float

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js