The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this:

<div style="float:left; width:100%;">
  <?php
  foreach ($datas as $rec) { ?>
  <div style="float:left; width:100%; background-color: green;">
    <div style="margin: 0px; float:left; width: 25%; background-color: red;"><a href="<?php echo $rec['HTTP']; ?>" target="_blank"><?php echo $rec['LINKNAME']; ?></a></div>
    <div style="margin: 1px; background-color: yellow;"><?php echo $rec['DESCRIPTION']; ?></div>
  </div>
  <?php } ?>
  </div>

due to the margin: 1px, it ends up breaking apart. How can I resolve this issue?

csshtml

Answer №1

To address this issue, there are a couple of potential solutions:

  1. One option is to define your margin as a percentage like this: margin:1%;
  2. Another solution involves utilizing the CSS3 box-sizing property.

webkit-box-sizing: border-box; /* Specifically for Safari/Chrome and other WebKit browsers */

-moz-box-sizing: border-box;    /* Primarily for Firefox and other Gecko-based browsers */

box-sizing: border-box;

Answer №2

<div style="float:left; width:100%;">
<?php
foreach ($data as $item) { ?>
    <div style="float:left; width:100%; background-color: green;">
        <div style="padding: 1px; float:left; width: 25%; background-color: red;"><a href="<?php echo $item['URL']; ?>" target="_blank"><?php echo $item['NAME']; ?></a></div>
        <div style="padding: 1px; background-color: yellow;"><?php echo $item['DESCRIPTION']; ?></div>
    </div>
<?php } ?>
</div>

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

Step-by-step guide on setting up a click counter that securely stores data in a text file, even after the

Can anyone help me make this link actually function as intended? Right now it only runs the JavaScript code, but I would like it to run the code and redirect to a webpage. Additionally, I need the data to be saved to a text file. Please provide assistanc ...

javascripthtmlcounterclick-counting

Ways to trigger a click event on a dynamically added class utilizing $(this);

I am attempting to retrieve the text when clicking on dynamically appended HTML elements. After some research, I came across the following code snippet: $(document).on('click', '.myClass', function (). However, it seems to work only f ...

jqueryhtml

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

htmlcssthymeleafbootstrap-5

angular trustAsHtml does not automatically insert content

Two divs are present on the page. Upon clicking button1, an iframe is loaded into div1. The same applies to button2 and div2. These iframes are loaded via ajax and trusted using $sce.trustAsHtml. This is how the HTML looks: <div ng-bind-html="video.tru ...

javascripthtmlangularjsiframe

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

What steps should I take to create a collapsible Bootstrap navbar?

I'm attempting to recreate the scrolling functionality seen here: It seems like they might be using a customized Bootstrap Navbar, so I've taken one from here: and tailored it to my needs. How can I achieve the effect where the navigation bar ...

javascriptcsstwitter-bootstrapnavbar

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

After testing my app in Ionic Lab, it runs smoothly. However, when I create the apk file and install it on my device, the performance is very slow. There are delays in clicking on buttons, pushing pages, opening modals, and closing modals. It seems like t ...

androidhtmlangularionic-frameworkionic2

Menu with full-width navigation and dropdown options

I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes ...

htmlcssnavigation

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

Convert XML data into a structured table format

We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...

javascriptajaxxmlhtmldom

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

htmlcss

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

I previously had a setup where items in a list would have alternate colors using jQuery: $('ul.follows li:nth-child(odd)').addClass('alternate'); Everything was functioning properly until I introduced an a tag before the list items. N ...

jquerycss

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

javascriptjqueryhtmlcss

Enhance your reality with Intel XDK's augmented reality feature

I am looking to develop an app using HTML and Intel XDK. It's a simple process - just place the final html pages in the www folder of the project and your app is good to go. Now, I want to integrate this: https://github.com/krisrak/html5-augmented-rea ...

htmlintel-xdk

Displaying only the div after the link from a table where all divs are shown using jQuery

I'm struggling to figure out how to select the immediate div inside each td and properly load up the page. Each link seems to toggle every hidden div on the page! The table contains hundreds of rows, with each row featuring a visible part - a link - ...

jqueryhtmlhidden

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

When using these two files, only one of them can work on a page. <script src="jquery.min.js"></script> <script src="jquery-1.min.js"></script>//Only the second one works Alternatively, if the order is changed: <script src="jq ...

javascriptjqueryhtml

Tips for storing checkbox preferences in a user account on an HTML/PHP website

Hello! I am currently working on a website. I have included a checkbox that updates the option selected in phpMyAdmin. The issue I am facing is that when I press submit and then refresh the page using F5, the preference I chose disappears on the client s ...

phphtmlcheckboxphpmyadmin

The component's width appears to be constrained by the use of display flex

I am currently working on a reactjs application that includes a header and another component. Initially, everything looks fine, but when I apply display: flex to their div, it seems to reduce the width of the header. Here are some images showing the issue: ...

cssreactjsflexbox

Disabling the @import cache feature in LessCSS Assetic

I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...

phpcsssymfonylessassetic

How to Choose a Radio Button from a Group using Selenium WebDriver and Java

My goal is to be able to choose a specific radio button from a set of radio buttons grouped by the name attribute: <div> <input type="radio" name="exampleInputRadio" id="optionRadio1" value="1"> <input type="radio" name="exampleInpu ...

javahtmlseleniumselenium-webdriverwebdriver