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

Email header image alignment issue in Thunderbird

I recently created an HTML email using a template and it looks great on most platforms, but not in Thunderbird. The header image is not aligned properly above the content as shown in the screenshot. Does anyone know how to troubleshoot this issue or have a ...

htmlcsshtml-emailstylingthunderbird

What is the reason behind Firefox's disregard of CSS font-size for code tags within pre tags?

There seems to be a discrepancy in how different browsers on Mac OS X 10.11.4 handle font-size. Is this an issue with Firefox, a CSS bug, or am I missing something about CSS? Here's a JSFiddle where you can see the details. In a section like this: &l ...

htmlcssfirefoxfonts

The eot file converted online is not functioning as expected

I have tried converting the 'Helvetica Neue Bold' ttf to eot online, but unfortunately it does not seem to work in IE8 and below. The font face I used is as follows: @font-face { font-family: 'HelveticaNeueBold'; src: url(&apo ...

htmlcssfont-face

When my script is located in the head of the HTML page, I am unable to

My goal is to make my JavaScript code function properly when I insert it into either the head or body elements of an HTML document. Let's look at some examples: First, I insert the script into the body as shown in this example (works correctly): ...

javascripthtmlcss

Pass information to a PHP file using JavaScript when the form is submitted

Essentially, I am looking to extract values from various inputs and spans using JavaScript when the submit input is clicked. These values will then be sent to PHP using $post in order to ultimately send them via email. Previously, I tested replacing all of ...

javascriptphphtmlpostform-submit

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

javascriptjqueryhtmlcss

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

htmlcsstwitter-bootstrap

Constructor for 'dojox.mobile.RoundRectCategory' could not be located

Using Worklight 5.06 and Dojo 1.8, I encountered the following errors on the browser's console after an Eclipse crash: Error: Unable to resolve constructor for 'dojox.mobile.RoundRectCategory' Error: Left list not found Error: this.leftLis ...

htmldojoibm-mobilefirstdojox.mobile

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

c#htmlcsstwitter-bootstrapasp.net-core-mvc

What is the process to discover, upload, and implement a custom font?

In my quest to locate and incorporate a font named neontubes, or if not available, a font called freestyle script, I have learned that I must obtain an src which is then included in my style.css file and subsequently designated in the styling rule like s ...

htmlcsswordpress

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

htmlcssflexboxresponsive

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

htmlcssvue.jsvuejs2vuetify.js

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

javascripthtmlcss

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

Having trouble locating elements with Selenium in Java?

I've been struggling to locate a particular WebElement using Selenium's API. I attempted to use a wildcard to capture all elements on the page and then iterated through them, but I'm still unable to locate the desired element. Could it possi ...

javahtmlseleniumweb

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

jquerycss

The strange behavior of !important, display:none, and .height()

While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly u ...

javascriptjquerycss

Links arranged in semicircles along the perimeter of the page

Here is some code that I have created to display two links in circles positioned on the left and right sides of a webpage. [class*="navigation"] .nav-previous, [class*="navigation"] .nav-next { position: fixed; z-index: 999; top: 50%; text-align ...

htmlcss