Tips for arranging DIV elements alongside images

I am struggling to align 5 images next to each other in order to create a slider that moves left or right. Despite my attempts using float:left, position:absolute, and display: inline, I cannot seem to make it work. Below is the HTML code I have:

<div class="slider-wrapper">
                <div class="slider">
                    <div class="portfolio-overlay">

                            <div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
                            <div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
                            <div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
                            <div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
                            <div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
                            <div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>

                    </div>   
                </div>

Below is my CSS as well:

.slider-wrapper {
padding: 25px 0 0;
}

.portfolio-single {
float: left;
width: 70%;
}
css

Answer №1

CHECK OUT THE LIVE ANIMATION DEMO

VIEW DEMO HERE

.slider-wrapper {
  overflow:hidden; /* to prevent page scrollbars */
  padding: 25px 0 0;
  white-space:nowrap;
  font-size:0; /* eliminate whitespace */
}

.portfolio-single {
  /*reset fontsize if necessary*/
  display:inline-block;
  width:70%;
}
.portfolio-single img{
  vertical-align:top;
  width:100%;
}

Instead of using align-left, you can utilize white-space: nowrap on a parent element to ensure that inner inline or inline-block elements do not wrap.

Following the above, set the slides to inline-block.

When using inline-block on elements, they will be in an inline flow, resulting in a 4px (whitespace) gap appearing next to each slide when each slide is placed on a new line in your HTML. To remove this gap, apply font-size:0; to the parent element.

If text is to be included within your slides, revert back to font-size:16px on your children slides.

vertical-align:top ensures proper vertical placement of images within their respective parent containers.

Answer №2

The reason for the images appearing on separate lines is because each image was given a width of 70%, causing them to break onto new lines. To get all 5 images on the same line, you would need to set the max width to 20%. However, any additional padding, border, or margin will expand that width, so it's best to keep it under 20%.

Check out this example on jsFiddle for reference

.portfolio-single {
    float: left;
    width: 10%;  /* Adjusted width to 10% instead of 70% */
}

Answer №3

The images are currently being displayed in divs, causing them to take up the full width of the page. To change this layout, you can simply set the divs to display as "inline":

.portfolio-images {display: inline-block;}

Check out this link for a live example: http://jsfiddle.net/9377D/2/

Answer №4

.portfolio-single {
    position: absolute;
    top: 50%;
    left: 50%;
}

Feel free to experiment with it!

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

Is there a way for my box to avoid reaching the bottom of the page?

Is there a way to prevent my box from reaching the bottom of the page? I am currently using Bootstrap 4 and have tried the spacing utilities, but they don't seem to be effective. https://i.sstatic.net/YRqb4.png Attached is a picture showing that the ...

htmlcsstwitter-bootstrapbootstrap-4

Modify the appearance of HTML dialog box using CSS styling

Currently, I am working on a Java Spring project that includes a single CSS file consisting of around 1500 rows. Recently, I was tasked with adding a dialog box to one of the screens in the project. The issue I encountered is that the style of the dialog b ...

javajquerycssstylesdialog

I am trying to include a vertical line both before and after the list tag. However, the first list tag is not displaying properly with the vertical

I encountered an issue where, despite adding a line using the "before" concept, the first list tag's left sideline is missing. The error output can be viewed here. The desired output should look like this: here Here is the HTML Code: <div cla ...

htmlcssbootstrap-4

"Locating the search button on an iPhone with the appropriate relative positioning

Encountering an issue with my iPhone and search box - the button on the search box appears to be duplicated. Check out the problem here: (no advertisements or spam). I am puzzled as to why this is happening and have no clue on how to resolve it. If you ...

iphonehtmlcss

How can you style an HTML tag using esc_html in CSS?

I've encountered an issue while editing the woocommerce orders.php template. This template is responsible for displaying the user's placed orders. I have identified several variables that require secure coding, such as $date_created or $view_orde ...

phphtmlcsswordpressescaping

Strange occurrences within the realm of javascript animations

The slider works smoothly up until slide 20 and then it suddenly starts cycling through all the slides again before landing on the correct one. Any insights into why this is happening would be greatly appreciated. This issue is occurring with the wp-coda- ...

javascriptcsstransition

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

I have a loop that creates multiple divs with the class panel. @for(comment <- event.getCommentsSorted()) { However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected. $(window).on('load& ...

jqueryhtmlcssplayframework

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

Guide to react native: aligning symbol in the middle

Currently, I am developing a simple app using React Native that targets both Android and IOS platforms. Within a View element, I have a Text component that displays a star symbol based on a conditional string {item.isFavourite ? "\u2605": "\u2606 ...

androidcssiosreact-native

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

Styling elements based on their index in R Shiny

In my R Shiny app, I am looking to color elements based on their index number (first element blue, second yellow, third red). Here is a reproducible example: library(shiny) ui <- fluidPage( tags$style(".control-label:nth-of-type(1) {background-colo ...

cssrshiny

What is the best way to navigate to a specific element using jQuery?

I am having an issue with scrolling to a specific div at the top of my page. Even though I have buttons for other sections, when I scroll to the bottom and click on the button, it does not take me to the top of the page as intended. You can view the CodeP ...

javascriptjqueryhtmlcssdom

What is the process for changing the background color with Angular?

It should be a straightforward task, but for some reason, it just won't cooperate. Within my controller: $scope.projects = [ //... { background: "#ffffcc" }, //... ]; In the HTML: <div ng-repeat="project in projects" ng-style="{ ...

javascriptcssangularjs

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

htmlcss

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

javascriptjqueryhtmlcss

"The issue with the addClass function not properly executing within an if

I am trying to make a feature where the class changes based on my selection. The issue I am facing is that when I change it for the first time, it switches from being classified as "black" to "colored". However, upon changing it back, it remains labeled as ...

jquerycss

What is the best way to update the hover state of an element when it is being

Simply put: when you click on an image, it will move with a CSS transition. The issue arises when the hover effect of the image persists even after it moves away from under the mouse. I have an image without a border. Upon clicking, the page zooms in usin ...

javascriptjquerycss

Emulate the rounded corner images on a transparent background using CSS border-image-outset, even when the width is too large to be specified as

After searching online, I came across a potential solution to my issue using the CSS3 property border-image-outset. However, since no browser supports this yet, I am seeking assistance in finding an alternative solution. Thank you in advance for any help. ...

htmlcss

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected

One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...

jqueryhtmlcss

Upon clicking the checkbox, only the ul tag will be displayed on the screen

It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag. .show-menu { display:block; } #menu{ float:left; } #social{ ...

htmlcsscheckbox