Member Avatar for pjh1985

Hi, I am developing a website that has on online menu for a restaurant. The data is pulled from a database and displayed using several divs and a wrapper, this is then repeated to create a 2 column list (using block to display left to right).

The problem I am having is that sometimes it appears to skip a space although all records are still displayed e.g.

record1 | record2
record3 | record4
missing | record5
record6 | record7

or you can check out the website at www.marina-vista.co.uk. This happens at different intervals and since each seperate menu item is repeated I am unsure how this could happen when most records are displayed as normal.

Edited by pjh1985 because: n/a
  • 3 Contributors
  • 5 Replies
  • 116 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Agree with that this looks like a layout/flow problem rather than a data gap. The first quick question to answer is whether the “missing” item is actually absent from the HTML or present but pushed/hidden by CSS. was right to ask for server code if rows are missing; ’s points about separators or an overlapping element are also valid checks.

Simple, ordered checks to run now:

  • View the page source (or use DevTools) and confirm the item exists in the generated HTML. If it does not, the bug is server-side. If it does, it’s pure CSS/layout.
  • Add a temporary visual outline to every repeated box so you can see wrapping/overlap quickly:
.item-debug { outline: 1px dashed red; background: rgba(255,0,0,0.03); }
  • In DevTools inspect the computed heights/margins of the box above the gap. A taller-than-expected box will cause the next floated element to flow to the next “row.”

Two robust fixes (pick one):

  • Use a clearfix on the parent so floats don’t collapse/shift:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Or switch to a modern layout (flexbox) so variable heights won’t reorder items unpredictably:
.container { display: flex; flex-wrap: wrap; }
.item { flex: 0 0 50%; box-sizing: border-box; vertical-align: top; }

Notes and cautions: clearfix is a good minimal fix and works in older browsers; flexbox is cleaner for equal-row behaviour but requires adequate browser support. If the order matters strictly (left/right pairing), consider rendering pairs server-side so layout changes cannot change ordering. Validate the final HTML (missing tags can also break layout) and re-test in multiple browsers. For details on clearfix and flexbox see the CSS-Tricks clearfix snippet and MDN Flexbox guide.

Recommended Answers

All 5 Replies

Member Avatar for shaya4207

Please post your code, there's not much that can be done without it

Member Avatar for pjh1985

I thought you would be able to just check the website so the full code and css are available. Here is the code for the menu items anyway.

<?php do { ?>
        
      <div class="menu_list">
          <div class="food_name"><?php echo $row_menu['food_name']; ?></div>
          <div class="food_price"><?php echo $row_menu['food_price']; ?></div>
          <div class="food_desc"><?php echo $row_menu['food_description']; ?></div>
          <div class="clear"></div>
      </div>
      <?php } while ($row_menu = mysql_fetch_assoc($menu)); ?>
.menu_list {
	float: left;
	width: 50%;
	display: block;
	margin-bottom: 15px;
	padding-bottom: 5px;
}



.food_name {
	float: left;
	width: 220px;
	padding-bottom: 10px;
	color: #333;
	font-size: 17px;
	font-weight: 400;
}
.food_price {
	float: left;
	width: 70px;
	padding-bottom: 10px;
	font-size: 16px;
	color: #333;
}

.food_desc {
	width: 285px;
	float: left;
	color: #5F5F5F;
	overflow: visible;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
Member Avatar for shaya4207

I thought you would be able to just check the website so the full code and css are available. Here is the code for the menu items anyway.

Well you can't really see PHP code by looking on the website.

Maybe try to post this in the PHP section, it looks like a PHP issue..

Member Avatar for pjh1985

I'm not sure if this is a php issue, it seems to me to be a problem with the layout. The repeating region appears to work properly however, when the issue occurs the container i use to format the repeated data (div id=menu_list_) is pushed across due to the difference in height in the previous divs. Every other time the divs are the same height even if the contents are different lengths.

I think for whatever reason the div above where the gap is appearing is causing the floated div below to be pushed across. I just cant find any reason why this would occur.

Edited by pjh1985 because: n/a
Member Avatar for MidiMagic

Two possibilities:

1. Missing or wrong separator in the data list used by the script.

2. The missing div is hiding under another div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.