Text not fitting correctly into div

Question

Wnodering if anyone can help. I am trying to create a div, which contains 3 columns. However, the text in the columns is getting cut off, and not fitting into the div correctly. Everything I try to fix it just doesn't seem to work. The only way I can get part of the bottom to show is just to put blank paragraph

<div style="background-color: #611228; color: #ffffff; width: 100%; clear: both;">
  <div style="width: 30%; max-width: 30%; padding: 10px; float: left;">
    <h4 style="color: #ffffff;">Year 1</h4>
      <ul style="color: #ffffff;">
        <li><strong>Introduction to Painting</strong> - AR4905 - 40 Credits</li>
            <li><strong>Contextual Studies</strong> - AR4906 - 20 Credits</li>
            <li><strong>Academic and Personal Development </strong>- AR4907 - 20 Credits</li>
            <li><strong>Drawing Process</strong> - AR4908 - 20 Credits</li>
            <li><strong>Image Capture and Collage into Painting </strong>- AR4917 - 20 Credits </li>
      </ul>
      &nbsp;
    </div>
  <div style="width: 30%; max-width: 30%; padding: 10px; float: left;">
    <h4 style="color: #ffffff;">Year 2</h4>
      <ul style="color: #ffffff;">
        <li><strong>Painting Language and Identity</strong> - AR5906 - 40 Credits</li>
            <li><strong>Painting Critical Study</strong> - AR5907 - 20 Credits</li>
            <li><strong>Career, Studio and Gallery Practice</strong> - AR5908 - 40 Credits</li>
            <li><strong>Drawing Personal Development</strong> - AR5909 - 20 Credits </li>
      </ul>
      &nbsp;
    </div>
    <div style="width: 30%; max-width: 30%; padding: 10px; float: left;">
        <h4 style="color: #ffffff;">Year 3</h4>
        <ul style="color: #ffffff;">
            <li><strong>Painting Major Study</strong> - AR6905 - 40 Credits</li>
            <li><strong>Critical Study in Context</strong> - AR6906 - 40 Credits </li>
            <li><strong>Professional Presentation</strong> - AR6907 - 40 Credits</li>
        </ul>
        &nbsp;
    </div>
    &nbsp;
    &nbsp;
    &nbsp;
    &nbsp;
</div>

Here is the code:

And here is a link to it on JSFiddle - https://jsfiddle.net/sbailey1/fLh1x40w/2/

Any help will be very much appreciated.

Thanks Sam

Consider getting rid of the properties float and clear in your CSS -- they will often lead to problems -- and hacks (like etc.). Look into some of the newer CSS like flexbox or grid instead. — chrwahl, Aug 05 '21 at 08:05
To be honest, the inline css is just how I have always done it. I appreciate your help. Will try the solutions on this card. — Samantha Ashton, Aug 05 '21 at 09:18

score 1 · Answer 1 · answered Aug 05 '21 at 07:55

This is happening because you have floated elements within a non-floated parent. Traditionally, the simplest fix for this was to use an empty div to clear the floats and force the parent to wrap around the children. This became an accepted hack because it a) worked and b) had relatively good cross-browser support back when we were dealing with a browser pool that included Internet Explorer et al.

To implement the fix, include the following div immediately before closing the parent container div:

<div style="clear: both; line-height: -0px;">&nbsp;</div>

This solution is very much a hack however, as it fails to keep layout separated from structure (you are introducing a redundant structural element to force layout). With modern browser support, far better solutions exists - my recommendation would be to only use float behaviour where absolutely necessary (e.g. wrapping text around images or other elements) and instead investigate either flexbox or grid CSS to layout column structures.

As a starting point for flexbox layout, I highly recommend the following CSS Tricks article:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Huge thank you to you all. I have now got the coding working, and learnt about the styling of my divs, so super appreciate your help. — Samantha Ashton, Aug 05 '21 at 09:38

Shahryar Mohajer · Answer 2 · 2021-08-05T08:08:06.470

just remove float and some css styles

.back{
  background-color: #611228;
  padding-right:10px;
  padding-left:10px;
}
.par{
  display:inline-block;
  vertical-align: top;
  width:30%;
  color: #fff;
}

<div class="back">
  <div class="par">
    <h4>Year 1</h4>
      <ul>
        <li><strong>Introduction to Painting</strong> - AR4905 - 40 Credits</li>
            <li><strong>Contextual Studies</strong> - AR4906 - 20 Credits</li>
            <li><strong>Academic and Personal Development </strong>- AR4907 - 20 Credits</li>
            <li><strong>Drawing Process</strong> - AR4908 - 20 Credits</li>
            <li><strong>Image Capture and Collage into Painting </strong>- AR4917 - 20 Credits </li>
      </ul>
    </div>
  <div class="par">
    <h4 >Year 2</h4>
      <ul >
        <li><strong>Painting Language and Identity</strong> - AR5906 - 40 Credits</li>
            <li><strong>Painting Critical Study</strong> - AR5907 - 20 Credits</li>
            <li><strong>Career, Studio and Gallery Practice</strong> - AR5908 - 40 Credits</li>
            <li><strong>Drawing Personal Development</strong> - AR5909 - 20 Credits </li>
      </ul>
    </div>
    <div class="par">
        <h4 >Year 3</h4>
        <ul>
            <li><strong>Painting Major Study</strong> - AR6905 - 40 Credits</li>
            <li><strong>Critical Study in Context</strong> - AR6906 - 40 Credits </li>
            <li><strong>Professional Presentation</strong> - AR6907 - 40 Credits</li>
        </ul>
    </div>
</div>

Text not fitting correctly into div

2 Answers2