When the children within a CSS container are floated, set the height of the container to

Question

When the children within a CSS container are floated, set the height of the container to

I've established a simple layout

<div class="container">
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
    <div style="clear:both;"></div>
</div>

where .sidebar and .content are styled with float: left

I have searched through numerous responses on S.O., but they all seem to work ONLY IF the .content does not exceed the screen size. To emphasize my issue, I present two examples:

http://jsfiddle.net/pleasedontbelong/h35vc/2/ (small content) http://jsfiddle.net/pleasedontbelong/56C9v/1/ (big content)

When the .content div is too large, the height:100% property in the container fails to function.

In both scenarios, the gray div should fill 100% of the height. It appears that the browser computes the window height prior to floating the elements.

Is there a CSS-only solution to this problem? (I could resort to JS, but it feels unclean)

css height

Answer 1

Answer №1

Get rid of the height attribute

.box{
    background-color: #555;
    margin: 10px;
    //no height specified
}

PREVIEW http://jsbin.com/45C8u/8/

If you want the box to always take up 100% then set min-height: 100% like so

.box{
        background-color: #555;
        margin: 10px;
        min-height: 100%;
    }

Answer 2

Get rid of the height attribute

.box{
    background-color: #555;
    margin: 10px;
    //no height specified
}

PREVIEW http://jsbin.com/45C8u/8/

If you want the box to always take up 100% then set min-height: 100% like so

.box{
        background-color: #555;
        margin: 10px;
        min-height: 100%;
    }

Answer 3

Answer №2

It seems like you're trying to ensure that the container/content never exceeds 100% of the screen height.

To achieve this, simply include overflow:hidden; in your container CSS.

If you need more details on the overflow property, you can check out: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 4

It seems like you're trying to ensure that the container/content never exceeds 100% of the screen height.

To achieve this, simply include overflow:hidden; in your container CSS.

If you need more details on the overflow property, you can check out: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 5

Answer №3

Remove the fixed heights and add overflow:auto to your container.

Check out this example on jsFiddle (larger size)

View another example on jsFiddle (smaller size)

Answer 6

Remove the fixed heights and add overflow:auto to your container.

Check out this example on jsFiddle (larger size)

View another example on jsFiddle (smaller size)

Answer 7

Answer №4

It seems like you're looking to make the container always 100% of the document's height, while also ensuring that floats stretch down without increasing the container's height.

To prevent the body from exceeding 100% height due to margins, you can do the following:

html, body {
  height: 100%;
  margin: 0;
}

If your container has padding that exceeds 100% height, you can use the border-box property as follows:

.container{
  background-color: #999;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

To ensure that floats are 100% height and handle text overflow with a scroll bar, use the following CSS:

.sidebar, .content {
  height: 100%;
  overflow: auto;
}

Does this solution align with what you had in mind? Check out a demo here.

Answer 8

It seems like you're looking to make the container always 100% of the document's height, while also ensuring that floats stretch down without increasing the container's height.

To prevent the body from exceeding 100% height due to margins, you can do the following:

html, body {
  height: 100%;
  margin: 0;
}

If your container has padding that exceeds 100% height, you can use the border-box property as follows:

.container{
  background-color: #999;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

To ensure that floats are 100% height and handle text overflow with a scroll bar, use the following CSS:

.sidebar, .content {
  height: 100%;
  overflow: auto;
}

Does this solution align with what you had in mind? Check out a demo here.

When the children within a CSS container are floated, set the height of the container to

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

What causes IE11 to sporadically run inappropriate media queries?

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

Guide to collapsing all menus in an Angular 4 Accordion

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

CSS Styled Product Index

What is the best way to relocate an image or link using CSS?

What is the reason for the presence of white space surrounding the div element

How to Place Buttons on the Left, Center, and Right in Bootstrap Framework

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

What is the best way to maintain two distinct background effects that each require different pixel sizes?

What is the best method for styling arrays displayed by React in version 15 using CSS?

maintaining the alignment of three div elements

Adjusting the background color of the custom input range thumb when the input is disabled

Tips for concealing overflowing CSS content

"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Troubleshooting the inability to set percentage values in Bootstrap styling