Boxes not occupying entire vertical space

My structure is unique, like a 9-box with div elements:

<div class="NBWrapper">
    <div class="NBTopRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
    <div class="NBMiddleRow">
        <div class="NBLeft">&nbsp</div>
        <div class="NBRight">&nbsp</div>
        <div class="NBMiddle">Content goes here</div>
    </div>
    <div class="NBBottomRow">
        <div class="NBLeft" />
        <div class="NBRight" />
        <div class="NBMiddle" />
    </div>
</div>

I've set CSS rules for each element:

.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}

Although all attributes are correct, the middle row's NBLeft and NBRight elements do not take up any height. Adjusting height to 100% has no effect.

I even tried adding &nbsp, but it didn't help.

I usually handle these situations well, but this one has me stumped. Any advice?

css

Answer №1

Ensure that your NBleft and NBright tags are self-closing, similar to the format <div></div>

Answer №2

Is the HTML Version you're working with compatible with self-closing divs? If not, consider using a closing tag instead.

Upon inspection...

<div class="NBMiddle">SharePoint WebPart content goes here<div>

It should actually be...

<div class="NBMiddle">SharePoint WebPart content goes here</div>

Another solution to consider is adding overflow:auto to the CSS class of the troublesome div. This will ensure proper display as long as there is content within the div.

Answer №3

It's a bit unclear what your intentions are, but maybe this will shed some light on the situation. I've included borders to make it easier to visualize what's going on.

Below is the HTML code...

<html>

<head>
    <link rel="stylesheet" media="screen" href="bla.css" >
</head>

<body>

<div class="NBWrapper">
    <div class="NBrow">
        <div class="NBcell">Top Left</div>
        <div class="NBcell">Top Middle</div>
        <div class="NBcell">Top Right</div>
    </div>

    <div class="NBrow">
         <div class="NBcellFullHeight">Middle Left</div>
         <div class="NBcellFullHeight">Middle Middle</div>
         <div class="NBcellFullHeight">Middle Right</div>
     </div>

     <div class="NBrow">
          <div class="NBcell">Bottom Left</div>
          <div class="NBcell">Bottom Middle</div>
          <div class="NBcell">Bottom Right</div>
      </div>
  </div>

  </body>
  </html>

And now for the CSS styling...

.NBWrapper {
    width: 800px;
    margin: auto;
}

.NBcell {
    width: 266px;
    float: left;
    border: 1px solid #000000;
}
.NBrow {
    float: left;
    width: 804px;
    border: 1px solid #000000;
}

.NBcellFullHeight {
    width: 266px;
    float: left;
    height: 500px;
    border: 1px solid #000000;
}

Answer №4

My solution involved reorganizing the div elements:

<div class="NBWrapper">
<div class="NBTopRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
<div class="NBMiddleRow">
    <div class="NBLeft">&nbsp</div>
    <div class="NBMiddle">SharePoint WebPart goes here</div>
    <div class="NBRight">&nbsp</div>
</div>
<div class="NBBottomRow">
    <div class="NBLeft" />
    <div class="NBMiddle" />
    <div class="NBRight" />
</div>
</div>

To improve the layout, I removed floats and margin attributes and added the following CSS:

.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}

.NBLeft, .NBRight, .NBMiddle {
    display: table-cell;
}

You might wonder why not use a table instead. While SharePoint 2010 has minimized its reliance on tables, it still uses them extensively. Personally, I prefer using div structures.

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

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 ...

javascripthtmlcssvue.jsvuetify.js

Nesting CSS classes allows for more specific targeting of

I am a bit rusty on CSS, it's been about 5-7 years since I last worked with it. Could someone help me come up with a solution to my problem? Here's the ideal design I have in mind: table.ctable { class:collapsible collapsed; } I know this syn ...

css

Personalize Material design slider Label - final element

When using Material-ui, the default position of Slider's labels is centered: However, I require the labels to have a space-between position. For example: To achieve this, I tried using the '&:last-child' property for the markLabel clas ...

cssreactjsmaterial-ui

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

htmlcssiframe

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('.navba ...

jqueryhtmlcsstwitter-bootstrap-3

What is the best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

htmlcssforms

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...

javascriptcssreactjssvgstyled-components

Resize images smoothly without disrupting the anchor scrolling

I have created a website with the following design: (Caution: The site is built using AngularJS on a server that may not serve it correctly - please visit directly instead of using browser reload.) However, I am facing two conflicting requirements... ...

htmlcss

Is it possible for a CSS code to be universally effective across all PHP files by setting style.css in header.php and then including header.php in each of the other PHP files?

Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...

phpcss

How to modify the background color of a <td> element using CSS and PHP

I am working on a PHP code snippet that populates a table from a MySQL database. <?php while($res = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>".$res['id']."</td>"; ...

phphtmlcss

The infamous IE7 Bug Caused by CSS HasLayout

Initially, I've reviewed the following articles in order to refresh my knowledge on these topics as I have encountered them before: Position Relative / Absolute / Fixed in IE While the above resources may be helpful for individuals facing these issu ...

cssdebugginginternet-explorer

Is there a way to keep the middle div at a fixed width while the left and right divs adjust their size as the screen gets smaller in a row with 3 divs?

Having 3 divs in a single row can be quite challenging. <div id="left"></div> <div id="middle"></div> <div id="right"></div> This layout requires the middle div to have a fixed width, while the left and right divs adju ...

csshtml

is it possible to adjust the height of a tableRow in mui?

I recently created a table component using Mui. I've been attempting to adjust the height of the tableRows, but so far I haven't had any success. Below is my code snippet: import React, { memo } from "react"; import { ActionItemType, ...

javascriptcssreactjsmaterial-ui

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

I need assistance with aligning the Post button to the right and having the text field for tags occupy the entire left section of the row within a Bootstrap 3 form. The form markup is shown below: https://i.sstatic.net/401RU.png Below is the complete cod ...

htmlcsstwitter-bootstrap-3

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

``There seems to be an issue with the alignment of items in the

I am fairly new to using css and bootstrap and I am currently working on integrating a carousel into my angular web app. I copied the code from the bootstrap site but I am facing challenges in aligning everything properly. Additionally, the image slides do ...

cssbootstrap-4carouselangular-ui-bootstrapbootstrap-carousel

How can you make the second block element in a pair stretch to fill the parent element?

I'm currently struggling to make the "rightcol" in the "wrapper" of my data-entry form fill the remaining space next to the second column. Despite successfully displaying the child elements properly, whenever I use the border-bottom attribute, the bor ...

htmlcss