Are the divs piling on top of one another?

I need assistance with a code I created that generates 3 divs containing images and hyperlinks. The issue is that each div should have a padding-right of 200px, but my attempts to achieve this using CSS have been unsuccessful. As a result, the 3 divs are stacking on top of each other instead of having 200px of space between them. Any help would be greatly appreciated.

Code:

<?php
    define('RANDOM_IMAGES_COUNT2',3);
    define('RANDOM_IMAGES_FORMAT2', '<div id="rand%s" style="width:170px;height1px;float:left;text-align:center;top"><img src="%s" style="border-style:solid;border-width:2px;border-color:black;" /><a href="%s" alt="%s" title2="%s">%s</a></div>');

#------------------------------------------------------------------------------

$images = array (
    array ( 'title2' => 'Test 2', 'src2' => 'pic2.jpg', 'href2' => 'http://mylink.com/path/','text2' => 'Hello' ),
    array ( 'title2' => 'Test 2', 'src2' => 'pic7.jpg', 'href2' => 'http://mylink.com/path/','text2' => 'Hello2' ),
    array ( 'title2' => 'Test 2', 'src2' => 'pic9.jpg', 'href2' => 'http://mylink.com/path/','text2' => 'Hello2' ), 
    array ( 'title2' => 'Test 2', 'src2' => 'pic5.jpg', 'href2' => 'http://mylink.com/path/','text2' => 'Hello2' ),     
    array ( 'title2' => 'Test 2', 'src2' => 'pic3.jpg', 'href2' => 'http://mylink.com/path/','text2' => 'Hello3' )
);

#------------------------------------------------------------------------------

if ( count($images) < RANDOM_IMAGES_COUNT2 ) {
    trigger_error('Not enough images given', E_USER_WARNING);
    exit;
}

#------------------------------------------------------------------------------

for ($i = 0; $i < RANDOM_IMAGES_COUNT2; $i++) {
    shuffle($images);

    $tmp = array_shift($images);
    printf( RANDOM_IMAGES_FORMAT2,$i, $tmp['src2'], $tmp['href2'], $tmp['title2'],     $tmp['title2'],$tmp['text2'] );
}
?>

Answer №1

Should you incorporate margin-right:200px; into your CSS code?

Answer №2

In order to improve the layout, I suggest incorporating padding-right: 200px; into your CSS within the define('RANDOM_IMAGES_FORMAT2' section.

Answer №3

The issue lies within this specific line:

 define('RANDOM_IMAGES_FORMAT2', '<div id="rand%s" style="width:170px;height:1px; float:left;text-align:center;top"><img src="%s" style="border-style:solid;border-width:2px;border-color:black;"/><a href="%s" alt="%s" title2="%s">%s</a></div>');

It is recommended to utilize CSS styles rather than inline styles for the DIV tag. The use of float:left is causing all containers to have a position:absolute value and align to the same left position. To resolve this, consider removing the float:left property, eliminating the margin on the DIV container, and implementing a margin-right:50px (adjust as needed) to space them apart effectively.

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

Simply by loading Bootstrap, it is causing the animation parameters to become disrupted

Currently, I am experimenting with implementing a frontend code I discovered online for simulating a dice roll. If you are interested, you can find the code in this repository: https://codesandbox.io/s/xjk3xqnprw?file=/styles.css:0-4535 Here is the HTML ...

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

Integrating a fictitious style using jQuery

Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...

Having trouble with the background-image not displaying and the image not showing up as expected?

I am experiencing an issue with my background image not displaying on my website. I am utilizing HTML5 along with CSS. Below is the code snippet in question: body { width: 1000px; background-image: url(background.jpg); background- ...

Calculating total marks for an online examination system using PHP

I am currently in the process of developing a straightforward online Examination system. When an Admin adds a question, they also input the Correct score and Negative score for that particular question. However, I am facing difficulties in determining how ...

The image grows in size until it requires scrolling to view the entire thing

<!-- Bootstrap 4.1.x --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <! ...

Maximizing the power of CSS within Visual Studio

After conducting extensive research in this area, I have not come across any remarkable information regarding the use of CSS in Visual Studio. While many people discuss it, specifics seem to be lacking. I am interested in learning about simple methods for ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

CSS3 animation for rotating elements

If I have this box in CSS3 (also if, for what I understand, this is not CSS3, just browsers specific) : HTML <div id="container"> <div id="box">&nbsp;</div> </div> ​ CSS Code #container { paddin ...

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

I have a three-column layout designed without using tables. <div id="main"> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> This is the CSS code: #left {width: 200px;fl ...

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

I need help hiding the items-per-page choices in a table without affecting the next/previous functionality. To achieve this, I've set the following props: :footer-props="{ 'items-per-page-options':[10], &apo ...

Condition has been fulfilled for both ngShow and ngHide

I am attempting to show a loading icon while data is being loaded, and then display the data once it is ready. However, I am encountering a problem where for a brief moment, both the loading icon and the data are visible... https://i.sstatic.net/vDXOG.png ...

CSS: Ensure container stays at the top without setting a fixed height

Is it possible to keep a container fixed at the top without setting a specific height? I have a container positioned on the body with margins all around. The container has an overflow set to auto, causing it to extend beyond the screen's height (with ...

Spacing between several iframes

I have multiple iframes on my page and I need the first one to scale properly. However, when I try to do this by visiting this link, I encounter a white space or gap between the first and second iframes after scaling. I want to ensure that there is always ...

Tips for repurposing a "for" variable in Django

I'm attempting to present my data frame in a table on my web application without using .tohtml because I require a dynamic table. However, it seems that I am unable to utilize the key/column variable from my loop: <table id='bdd_table'> ...

Use JavaScript to alter a CSS rule within an object

Similar Question: Changing a CSS rule-set from Javascript I am curious to know if it is possible to adjust Css stylesheet declarations without using inline styling. For instance, consider the following example : <style> .box {color:green;} ...

Returning an HTML input box variable to the code-behind section

I currently have the setup outlined below. <table> <tr> <td> <%getScheduleTable("LineNumber", rate, count);%> </td> </tr> </table> The function getScheduleTable ...

managing data in an uncomplicated manner

In my website, users can select animals from a database without the page reloading. For example, under the category "Brown Animals," a user might choose "kittens" by checking a checkbox. Later, when browsing through "Cute Animals," if "Kittens" is displaye ...

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...