CSS - overcoming the challenge of border not extending over floated left elements

Question

CSS - overcoming the challenge of border not extending over floated left elements

I encountered an issue with the following code:

<div style="border:3px solid #808080;">
    <h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
    <div class="column-1">
         <img src="images/ruler-icon.png">
    </div>
    <div class="column-2">
         <img src="images/bed-icon.png">
    </div>
    <div class="column-3">
         <img src="images/bath-icon.png">
    </div>
</div>

The border does not extend to cover column-1, column-2, and column-3 since these elements are floated left. How can I make them part of the border?

Below is the relevant CSS:

.column-1, .column-2, .column-3
{
    float:left;
    width: 33%;
    border-right: 3px solid #808080;
    height: 52px;
    padding: 10px;
}

html css

Answer 1

Answer №1

To prevent overlapping, one solution is to insert a div in the parent element with the clear:both property immediately after the floated elements, as suggested by RemyaJ.

Example using the first method: https://jsfiddle.net/zmasvt8b/

Alternatively,

Another approach would be to apply the overflow:hidden property to the parent div.

Example using the second method: https://jsfiddle.net/jv5xtLg9/

Answer 2

To prevent overlapping, one solution is to insert a div in the parent element with the clear:both property immediately after the floated elements, as suggested by RemyaJ.

Example using the first method: https://jsfiddle.net/zmasvt8b/

Alternatively,

Another approach would be to apply the overflow:hidden property to the parent div.

Example using the second method: https://jsfiddle.net/jv5xtLg9/

Answer 3

Answer №2

While you may have already decided on an answer, I wanted to offer another option using flexbox and keeping the CSS separate from the HTML.

.container {
  /* Utilized for creating columns */
  display: -webkit-flex;
  display: flex;
}

.item {
  /* Helps create columns */
  flex-grow: 1;
  border: 3px solid #808080;
  border-top: none;
  height: 52px;
  padding: 10px;
}

.heading {
  border: 3px solid #808080;
  margin: 0;
  text-transform: uppercase;
  font-size: 38px;
  color: #808080;
  text-align: center;
}


/* To eliminate duplicate borders */
.item-2 {
  border-left: none;
  border-right: none;
}

<h1 class="heading">Lowell</h1>
<div class="container">

  <div class="item item-1">
    <img src="images/ruler-icon.png">
  </div>

  <div class="item item-2">
    <img src="images/bed-icon.png">
  </div>

  <div class="item item-3">
    <img src="images/bath-icon.png">
  </div>
</div>

Answer 4

While you may have already decided on an answer, I wanted to offer another option using flexbox and keeping the CSS separate from the HTML.

.container {
  /* Utilized for creating columns */
  display: -webkit-flex;
  display: flex;
}

.item {
  /* Helps create columns */
  flex-grow: 1;
  border: 3px solid #808080;
  border-top: none;
  height: 52px;
  padding: 10px;
}

.heading {
  border: 3px solid #808080;
  margin: 0;
  text-transform: uppercase;
  font-size: 38px;
  color: #808080;
  text-align: center;
}


/* To eliminate duplicate borders */
.item-2 {
  border-left: none;
  border-right: none;
}

<h1 class="heading">Lowell</h1>
<div class="container">

  <div class="item item-1">
    <img src="images/ruler-icon.png">
  </div>

  <div class="item item-2">
    <img src="images/bed-icon.png">
  </div>

  <div class="item item-3">
    <img src="images/bath-icon.png">
  </div>
</div>

Answer 5

Answer №3

To resolve the problem, insert a div with the CSS property clear:both following the floated elements within the containing div.

Answer 6

To resolve the problem, insert a div with the CSS property clear:both following the floated elements within the containing div.

Answer 7

Answer №4

Here is the CSS that may suit your requirements. Adjust the width as necessary.

.box1, .box2, .box3
{
    width: 25%;
    border-left: 4px solid #909090;
    height: 60px;
    padding: 12px;
    display:inline-block;
}

Answer 8

Here is the CSS that may suit your requirements. Adjust the width as necessary.

.box1, .box2, .box3
{
    width: 25%;
    border-left: 4px solid #909090;
    height: 60px;
    padding: 12px;
    display:inline-block;
}

Answer 9

Answer №5

The main reason behind this rule is that parent elements should not contain floated elements. To resolve this issue, simply include overflow:auto; in your primary div. This will effectively ensure that the div properly contains floated elements that exceed the container.

There are alternative methods to achieve the same outcome, but using overflow:auto is the simplest approach.

It's important to avoid adding HTML elements for tasks that CSS is designed to handle.

Answer 10

The main reason behind this rule is that parent elements should not contain floated elements. To resolve this issue, simply include overflow:auto; in your primary div. This will effectively ensure that the div properly contains floated elements that exceed the container.

There are alternative methods to achieve the same outcome, but using overflow:auto is the simplest approach.

It's important to avoid adding HTML elements for tasks that CSS is designed to handle.

CSS - overcoming the challenge of border not extending over floated left elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using Selenium in Python, loop through webpages to extract the search result position

Python script for connecting to mWebSocket Server using WebSocket client

Using jQuery to modify the CSS of a div located outside of an iframe

Tips for customizing the event target appearance in Angular 2?

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

Turn off dropdown menu animation (JavaScript)

Issue with Bootstrap 4 nav bar where the first nav item is not highlighted and a problem with scrollspy

How to make external links open in a new window within wagtail

Ensure that buttons are cropped when extending beyond the border of another DIV

What is the purpose of using "recaptcha_get_html" function to echo?

Ways to eliminate flickering when dynamically updating iframe content

What could be the reason for the individual components not being populated within the listItem?

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

Attempting to dynamically generate a delete button and execute the delete function using JavaScript

Repeatedly view the identical file on HTML

Does the media query max-width refer to the size of the viewport or the size of the window?

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

After refreshing, a blank page appears when using the HTML POST method

What types of devices are compatible with the different versions of the Android operating system?

Differences between using tables and divs for form layouts