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

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

javascriptphphtml

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

Angular material chips showcase a row of five chips

I am working with the basic mat-chips from angular material and I want to arrange them in rows of five without increasing their size: Chip1 Chip2 Chip3 Chip4 Chip5 ..................(space left) Chip6 Chip7 Chip8 Chip9 Chip10 ...............(space le ...

htmlcssangularflexboxangular-material

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

javascriptjqueryhtmlurlwindow.location

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Currently, I have a page with five stacked DIVs in a vertical layout. I am wondering if it is necessary to apply the FLOAT property to each DIV to adhere to good coding practices. It appears that there are no issues, such as re-wrapping, in any browser e ...

htmlcss-float

Sending a request to a PHP file using Ajax in order to display information fetched from

I am attempting to display the database row that corresponds with the student's forename and surname selected from the dropdown list. I have managed to store the first name and surname in a variable called clickeditem. However, I suspect there may be ...

phpjqueryhtmlmysqlajax

Uncovering data treasures on the web with BeautifulSoup: Extracting JSON files from DIV elements made simple

As I attempted to extract data from a website using standard class names for the required elements, I came across an interesting discovery. Near the top of the HTML code, there was what appeared to be a JSON file containing all the necessary information. ...

htmljsonpython-3.xbeautifulsoup

Error Encountered in Laravel 5.2 FormBuilder.php

Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...

phpcsslaravel-5

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

htmlcsssveltesplidejs

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

Tips for preventing the hard coding of option values or inner HTML within a select menu when working on CS50 Finance

<select name="symbol"> {% for row in stocks %}} sym = row["symbol"] <option value=sym>sym</option> {% endfor %} </select> The current code snippet above displays a drop-down menu populated with stock symbols from a ...

htmlflaskjinja2

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

javascriptphphtmlajax

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

htmlangularprimeng

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

javascripthtml

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...

htmlcsscss-counter

Ways to expand media queries using sass

I have been using media queries to modify my code. @media (min-width: 576px) .modal-dialog { max-width: 500px; margin: 14% auto; } I want to change the media query, but after searching online, I couldn't find a suitable solution. I know the foll ...

csssassbootstrap-4media-queriesbootstrap-modal

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap