Tips for clearing floated images when the sidebar is also floated

Can someone assist me with this code snippet?

I am trying to figure out a way to clear the nearest floated block.

It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div.

Here is the HTML code:

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
</nav>

<div id="content">
    <img src="http://www.lazne-belohrad.cz/soubory/tinymce/!titulni_obrazky/knihy.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien. In rutrum. Integer in sapien. Nam quis nulla. Aliquam ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
        <p id="INeedThisUnderImg">This "cleared:left" paragraph clears "nav floated left". Is any way to clear only floated img?  I would like this paragraph under img. I could user position absolute for nav, but if content is only few words, nav overflows footer :(</p>
</div>

    <footer>
        <p>Footer</p>    
    </footer>  

And here is the CSS code:

nav {
    float:left;
    border: 1px solid black;
    width: 100px;
}
div#content {
    border: 1px solid black;
    margin-left: 110px;
}
div#content img {
    float: left;
}

div#content p#INeedThisUnderImg{
    clear: left;
}

footer{
    border: 1px solid black;
    margin-top: 10px;
}

Any help or suggestions would be greatly appreciated. Thank you!

Answer №1

One possible solution is to eliminate clear:left from this particular element:

div#content p#INeedThisUnderImg {
    clear: left;/*Please remove this line*/
}

Then, you can include clear:left in your HTML right after the #content element:

<br style="clear:left;" />

Check out this fiddle for reference

If you want the content to be precisely under the image, you can follow these steps:

div#content p#INeedThisUnderImg {
    float: left;/*Add this line*/
}

Again, don't forget to add clear:left in your HTML after the last <p> tag within the #content section:

<br style="clear:left;" />

Here's another fiddle demonstrating the changes

For further information, you may find this article on Clearing floats helpful.

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

Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet: <section class="next-gen"&g ...

Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner: Columns with equal width 1st and 3rd rows - 2 columns 2nd row - 3 columns https://i.sstatic.net/aQyNR.png Order = [{ details:[ { ke ...

Suggestions for incrementing a button's ID every time it is clicked

I am working on a button functionality that increases the button id when clicked. Below is the HTML code for the button: <input type="button" id="repeataddon-1" name="repeataddon" class="repeataddon" value="add" > Accompanied by the following scr ...

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

Auto-selecting the first item in a CSS menu when the switcher is tapped on mobile devices

Struggling with a responsive CSS menu on my website, . The switcher on mobile seems to automatically click the first item in the menu (Home) as I open it, redirecting me instantly. When setting the link to "#" everything is fine, but then I lose the home l ...

"Utilizing node.js to create a custom regular expression for removing anchor tags

Can someone provide me with a regex pattern that can eliminate all the a tags from HTML and display the URL as plain text? For instance, take this text: abc <a href="http://a.com" target="_blank">bbb</a> ccccccc After applying the regex patt ...

What are the steps for distributing a styled React component?

My goal is to release a UI library using React, but I am struggling with how to handle styles. When I write code in a project, I typically use webpack and babel to build my code, resulting in the creation of a *.css file. import React from 'react&ap ...

"Displaying <canvas> at its true resolution even when zoomed in, thanks to Retina technology

I am currently working with a <canvas> element to create vector graphics and I want to ensure that it displays in the highest quality possible while using minimal resources across various viewing conditions. Specifically, I aim to achieve a 1:1 mappi ...

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

Tips for submitting multiple radio button values in a tabular format

HTML Code: <div class="tab"><h4>Zip Code</h4> <p><input type="text" class="text1" placeholder="Enter zip code..." oninput="this.className = ''" name="zipcode"></p> </div> <div class="tab">& ...

I cannot seem to receive the confirmation of success!

Trying to store user details in a database and display a success message that fades in. I have attempted some code, but unfortunately it's not working. Please help me out. Apologies if I am mistaken. Here is my register.php code: <?php require ...

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

I am facing a problem with my HTML5 range slider. After setting a value (status) and sending it to the database, when I reload the page the slider's value is always set to '50'. The slider is being generated within an ng-repeat from AngularJ ...

The title attribute in Vue3 is updated through props, but computed properties remain unaffected

I incorporated an external library into my project using Vue3. The component I am utilizing is sourced from a third-party library [Edit: Upon realizing that the GitHub repository for this library is no longer being maintained, I have updated the code to re ...

What strategies should be employed to manage data-driven input in this particular scenario?

In the process of creating a small webpage, I have designed 2 navigation panels - one on the left and one on the right. The leftNav panel contains a list of different flower names. While the rightNav panel displays images corresponding to each flower. A ...

Guide to Designing a Three-Column Layout Using Only CSS

I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using: <div id="content"> <asp:ContentPlaceHolder ID="Ma ...

Disappearing act: CSS3 transform - rotate makes font vanish

When applying a simple css3 transformation rule to an html element which contains various other elements like h1, h2, inputs, and img, I encounter the following issue: div{ -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skew ...

The script is not functioning properly when placed outside of the HTML body tag

I have a main template that is functioning properly with the layout I've included here. However, I am facing an issue when trying to organize the scripts within one block. Specifically, when I move one of the scripts from the body section to the head ...