CSS clearfix restricted to immediate parent div

Question

CSS clearfix restricted to immediate parent div

Below is the code snippet that illustrates the objective I am attempting to achieve

<div>
  <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
  Left div <br>float:left <br> fixed width 220px
  </div>

 <div>
    Right div. <br>No styles<br> Takes remaining width <br><br>
    There are some small blocks (one - four) with "float:left"


  <div class="small">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </div>

  <div>
   <div id='bottom_div1'>Some content which needs to appear below small blocks</div>
   <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
  </div>

 </div>

</div>

View a live demo here

I am seeking assistance in ensuring that the content within the divs bottom_div1 and bottom_div2 appears within the right div beneath the row of small blocks ("one" through "four"). Despite attempting "clear:both," the content currently displays below the left div, while using "clear:none" places it alongside the small blocks. Any guidance on this issue would be greatly appreciated!

html css

Answer 1

Answer №1

To fix the issue, simply include overflow: hidden in the container of the smaller divs.

WHY THIS SOLUTION WORKS?

overflow: hidden (and other non-visible values) establishes a "block formatting context" which contains all floating divs within it, preventing them from affecting the layout.

.small div {float:left; padding:10px; border: 1px solid #aaa}
.small {overflow: hidden}

<div>
    <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
        Left div <br>float:left <br> fixed width 220px
    </div>

    <div>
        <div>Right div. <br>No styles<br> Takes remaning width <br><br> There are some small blocks (one - four) with "float:left"</div>
    </div>

    <div class="small">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>

    <div id='inner-footer'>
        <div id='bottom_div1'>Some content at the bottom, which needs to appear below small blocks</div>
        <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
    </div>
</div>

Answer 2

To fix the issue, simply include overflow: hidden in the container of the smaller divs.

WHY THIS SOLUTION WORKS?

overflow: hidden (and other non-visible values) establishes a "block formatting context" which contains all floating divs within it, preventing them from affecting the layout.

.small div {float:left; padding:10px; border: 1px solid #aaa}
.small {overflow: hidden}

<div>
    <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
        Left div <br>float:left <br> fixed width 220px
    </div>

    <div>
        <div>Right div. <br>No styles<br> Takes remaning width <br><br> There are some small blocks (one - four) with "float:left"</div>
    </div>

    <div class="small">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>

    <div id='inner-footer'>
        <div id='bottom_div1'>Some content at the bottom, which needs to appear below small blocks</div>
        <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
    </div>
</div>

Answer 3

Answer №2

To achieve the desired effect, you can utilize the CSS property display: inline-block within the rule .small div, like so:

.small div {display: inline-block; padding:10px; border: 1px solid #aaa}

Additionally, make sure to remove the clear styles for both bottom_div1 and bottom_div2. This adjustment should produce the desired outcome.

Answer 4

To achieve the desired effect, you can utilize the CSS property display: inline-block within the rule .small div, like so:

.small div {display: inline-block; padding:10px; border: 1px solid #aaa}

Additionally, make sure to remove the clear styles for both bottom_div1 and bottom_div2. This adjustment should produce the desired outcome.

Answer 5

Answer №3

Almost there! You just need to make a few adjustments to your divs and styles. Take a look at the revised snippet below to see where you can improve:

.left-div {
float:left;
width:220px;
height:300px;
border: 1px solid #aaa;
}

.right-div {
float:left;
width: 300px;
}

.small div {
float:left;
padding:10px;
border: 1px solid #aaa;
}

#bottom_div1,
#bottom_div2 {
clear: left;
}

<div class="parent-div">

<div class="left-div">
Left div<br>
float:left<br>
fixed width 220px
</div>


<div class="right-div">
Right div.<br>
Only styles are float:left and width: 300px<br>
Takes remaining width<br><br>
There are some small blocks (one - four) with "float:left"

<div class="small">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>

<div id="bottom_div1">Some content at the bottom, which needs to appear below small blocks</div>
<div id="bottom_div2">Some content at the bottom, which needs to appear below small blocks</div>

</div> <!-- End of .right-div -->

</div> <!-- End of .parent-div -->

Answer 6

Almost there! You just need to make a few adjustments to your divs and styles. Take a look at the revised snippet below to see where you can improve:

.left-div {
float:left;
width:220px;
height:300px;
border: 1px solid #aaa;
}

.right-div {
float:left;
width: 300px;
}

.small div {
float:left;
padding:10px;
border: 1px solid #aaa;
}

#bottom_div1,
#bottom_div2 {
clear: left;
}

<div class="parent-div">

<div class="left-div">
Left div<br>
float:left<br>
fixed width 220px
</div>


<div class="right-div">
Right div.<br>
Only styles are float:left and width: 300px<br>
Takes remaining width<br><br>
There are some small blocks (one - four) with "float:left"

<div class="small">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>

<div id="bottom_div1">Some content at the bottom, which needs to appear below small blocks</div>
<div id="bottom_div2">Some content at the bottom, which needs to appear below small blocks</div>

</div> <!-- End of .right-div -->

</div> <!-- End of .parent-div -->

CSS clearfix restricted to immediate parent div

Answer №1

Answer №2

Answer №3

Similar questions

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is it possible to enhance a form box with a border?

Obtaining solely the words found within HTML documents

When making Axios GET requests, HTML receives promises that may remain empty

Show the button's value inside a div when clicked using Javascript and HTML

Learn how to extract an ID created with AngularJS using JavaScript

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

Use CSS alignment to combine both the profile picture and title on a webpage

How can I submit a form using ajax and retrieve the data as an array?

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

Personalized design created using v-for

Passing a PHP variable through a URL using the GET method

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

Pop-up box with hyperlink

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

What is the best way to remove this .click function?

Changing CSS properties in React

Could not find the element using the specified cssSelector

Pictures displayed in a bootstrap carousel are not completely filling up the entire carousel space

Tips for modifying the value and refreshing the array