Arrange the divs in a horizontal line without stacking them vertically, specifically in Internet Explorer 7

I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling.

For example:

[x] [x] [x]

Here is a simplified version of my setup:

<div id="container">
    <div id="second">
        <div class="final"><img src="..." /></div> //Repeat as needed by the user
    </div>
</div>

The CSS code looks like this:

#container {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#second {
  height: 500px;
}
#final {
  display: inline-block;
  float: left;
}

This arrangement works in Firefox, but not in IE7. In IE7, all the "#final" divs stack vertically like this:

[x] [x] [x]

Do you have any suggestions on how to solve this issue?

Answer №1

There are a few issues that need to be addressed here:

<div id="container">
    <div id="second">
       <div class="final"><img src="..." /></div> //Repeat as needed from user
       <div style="clear:both"></div>
    </div>
</div>

After your floats, you should add a DIV that stays constant to prevent any subsequent elements from floating (use clear:both).

The "final" DIVs should be part of a CSS class rather than an ID if you have multiple instances.

.final {
  float: left;
}

With these changes, your HTML/CSS errors should be fixed!

Edit: While the previous adjustments will resolve your HTML/CSS problems, it seems like you want the document to scroll horizontally. To achieve this, set the width of the #container div to exceed the combined widths of all .final divs. Otherwise, the browser will try to stack everything vertically instead of scrolling horizontally.

Answer №2

Check out this code snippet...

<div id="wrapper">
    <div id="content">
      <div class="item"><img src="..." /></div>
      <div class="item"><img src="..." /></div>
      <div class="item"><img src="..." /></div>
      <div class="item"><img src="..." /></div>
    </div>
</div>
<style>
#wrapper {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#content {
  height: 500px;
}
.item {
  float: left;
}

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

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

Text input in Bootstrap not reaching full width

Trying to achieve a Bootstrap textfield embedded in a panel that spans 100% of the remaining space-width within the panel. However, this is the result obtained: The blue border represents the edge of the panel. Below is the code being used: <div clas ...

AngularJs FileList Drag and Drop Feature

Being brand new to front-end development, I decided it would be a fun challenge to implement drag and drop functionality on an existing upload page. However, as I began integrating ng-flow (a directive that helps with drag and drop), I encountered difficul ...

Place the divs over the background image by using relative positioning

I am working on a project where I have a full-width div with a background image containing people. I want to display a tooltip when hovering over each person, but I am facing challenges in aligning the divs properly. Image maps with % widths do not seem t ...

Exploring HTML list with padding to determine optimal wrapping configurations

Having an issue with a section of links. The blocks for the links are lining up next to each other when the viewport is wide, but I want one block labeled MOBOT to drop down onto a new line in a small responsive space. The goal is for the MOBOT square to ...

Ways to address the issue of "$ is not a function"

Whenever I attempt to upload an image, this error message pops up: $ is not a function The source of the error can be found here: $(document).height(); ...

Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided? Check out my code on Fiddle! jQuery(function () { jQuery('#btn_test').click(function () { $(this).parent().children('#test_inner').slideToggle('500' ...

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

What is the best way to prevent the background-image fade effect in Chrome?

While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces ...

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

Increasing the size of the .ui-btn-left component

Seeking advice on a Javascript query that I can't seem to resolve online. As a beginner in Javascript, I'm struggling with what seems like a simple issue. My dilemma lies in enlarging the close button on a jQuery page. .ui-dialog .ui-header .ui- ...

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

In what way could the border exceed the dimensions of the div?

<head> <meta charset="UTF-8"> <title>Document</title> <style> #Tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } </style&g ...

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

Default file is still generated by Sass even when variables are modified

Currently, I am in the process of modifying some variables for my customized version of Bootstrap. At the moment, I have the Bootstrap SCSS files along with my own variables file. This is how my file appears: @import "/path/to/bootstrap"; $blue: #42a5f ...

Design a customizable overlay with a moveable and size-adjustable layer below it

After working with kineticjs, I successfully created an app that allows images to be draggable and resizable, which is great progress; Now, I am facing a challenge: I want to have an overlay in the center with a block of variable height/width that display ...

Arranging Pictures Beside Text Using CSS

I have a puzzling issue that I cannot seem to find an answer for despite the countless times it has been asked. In my footer, there is aligned copyright text, and I am attempting to add 3 logos to the right of it without any line breaks. However, when the ...

Why is it that injecting javascript within innerHTML seems to work in this case?

According to the discussion on this thread, it is generally believed that injecting javascript in innerHTML is not supposed to function as expected. However, there are instances where this unconventional method seems to work: <BR> Below is an examp ...

Manipulating the Datepicker onChangeMonthYear event in Jquery UI

I am currently working on customizing the appearance of specific dates within a jQuery UI datepicker. If a date is considered a holiday (meaning it matches a date in an array of specified holiday dates), I want to remove the default styling and make some m ...