The minimum height increases as the inner divs expand

Can you help me with the code below?

html

<div class="content">
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>

css

.content{
    border: 1px solid black;
    width:940px;
    margin:auto;
    padding:10px;
    padding-top: 10px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    min-height: 1000px;
    background-color: #FFFFFF;
    margin-bottom:0;
}


.col{
    float:left;
    border: 1px solid red;
    background-color:blue;
    height: 2000px;
    width:18%;
}

Check out the fiddle here.

I'm trying to make the content grow with the .col in height but if col is lower than 1000px, I want the content to remain at a height of 1000px. Doesn't the min-height property do that? I plan to fill col with images of varying heights in different columns so I can't predict the total height of each .col div.

htmlcss

Answer №1

When you float the .col, it doesn't automatically make the parent element expand to contain it. To fix this, you need to clear the floats after the .col element. One way to do this is by using the :after pseudo element without adding any extra HTML markup:

Check out the demo here

Here's the CSS code for clearing the floats:

.content:after{
    content:'';
    display:block;
    clear:both;
}

Answer №2

html

<div class="container">
    <div class="row">

    </div>
    <div class="clearfix"></div>
</div>

css

.container{
    border: 1px solid black;
    width:960px;
    margin:auto;
    padding:15px;
    padding-top: 15px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(60, 60, 60, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(60, 60, 60, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(60, 60, 60, 0.75);
    min-height: 1050px;
    background-color: #F0F0F0;
    margin-bottom:0;
    height:auto;
    display:block;
}
.clear{
    clear:both;
}

.row{
    float:left;
    border: 2px solid red;
    background-color:green;
    height: 2200px;
    width:20%;
}

Is this what you are looking for?

Answer №4

insert clearfix after .col

<div class="wrapper">
    <div class="col">

    </div>
    <div class="clearfix"></div>
</div>

Next, delete the min-height: 1000px; from .wrapper

CSS code for clearfix

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * Only for IE 6/7
 * Add this to ensure proper float containment.
 */

.clearfix {
    *zoom: 1;
}

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

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...

javascriptjqueryhtmlweather

What are some ways to enable text highlighting when it is disabled?

I've encountered an issue with text highlighting in my asp.net web application when using the latest versions of FireFox and Google Chrome. Strangely, pressing CTRL+A also does not work for all input fields. I haven't had the opportunity to test ...

csscross-browserhighlighttextselection

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Seeking assistance with managing audio on an iPad using JavaScript (mute/unmute). Any suggestions or advice would be greatly appreciated. ...

javascriptjqueryhtmlipad

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

javascriptjqueryhtmlcss

What is the simplest method for a beginner to transfer form data from HTML to an email?

Currently I am in the process of developing a compact website and looking to design an HTML form that can send values to my client's email address. The snippet of code for the form is as follows: <form id="contact-form" method=" ...

phphtml

Position the division at the location of the cursor for particular usemap components

Looking for a way to position a division on top of an image using a usemap. Interested in having the div only appear when the mouse hovers over a particular area, and at the precise location of the cursor. Came across some examples using jQuery, similar ...

javascriptjqueryhtmlpositionimagemap

Transform ajax functionality into jquery

I need help converting an AJAX function to a jQuery function, but I'm not sure how to do it. function convertToJquery() { // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Set up variables needed to send to PHP file var ur ...

javascriptjqueryhtmlcssajax

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

jquerycss

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

javascriptcsstextselection

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

javascriptcssreactjsmaterial-uigithub-pages

JS Emphasis on Scrolling Div

I'm facing an issue with a button that opens a scrollable div. When I try to use the arrow keys on the keyboard, they do not scroll the div as expected. Interestingly, if I click anywhere on the div, then I am able to scroll using the arrow keys. I ...

javascriptjqueryhtml

Creating a responsive image within a panel using Bootstrap

I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using r ...

javascripthtmlcsstwitter-bootstrapreactjs

Enhancing the appearance of your website by incorporating external stylesheets and utilizing multiple class names through

Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names. Currently, you can only assign one class name like thi ...

cssreactjswebpack

Can JavaScript trigger an alert based on a CSS value?

Hello, I am facing an issue. I have created a blue box using HTML/CSS and now I want to use JavaScript to display an alert with the name of the color when the box is clicked. Below is my code: var clr = document.getElementById("box").style.background ...

javascripthtmlcss

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

javascriptphphtml

Phrases are truncated in the initial line of each ion-item within the ion-list

In Ionic 3, I am facing an issue with my ion-list where the first line inside each ion-item is getting cut off. Specifically, the capital 'A' letter is not entirely visible. Can anyone provide assistance with this? Thank you. Below is my code sn ...

cssionic-framework