CODEWITHSUNDEEP
htmlcsscss-float
Jorge
Jorge

Reputation: 5676

CSS container doesn't stretch to accommodate floats

<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>

The result is:
result

I want a result like this:
desired result

Upvotes: 21

Views: 17624

Answers (7)

Daniel Vassallo
Daniel Vassallo

Reputation: 344261

One option is to put in a <div style="clear: both;"></div> just before closing the container div.

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>

Upvotes: 5

Corey Ballou
Corey Ballou

Reputation: 43447

A quick fix is to add overflow: hidden to your .container.

This is not the best solution per say, merely the quickest fix. Your best solution would be to implement and apply clearfix as it doesn't have issues with printing due to overflow.

In the event you use overflow: auto or overflow: hidden and a user attempts to print the page, content that does not fit on the printed page will be clipped because:

  1. scroll-bars do not print
  2. hidden content does not display

Upvotes: 12

BD.
BD.

Reputation: 890

This might be of help "Clearing a float container"

Upvotes: 1

eozzy
eozzy

Reputation: 68650

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

Apply .clear to your parent element.

Upvotes: 1

John Boker
John Boker

Reputation: 83699

to the outer div you might want to use the clearfix css, explained here: http://www.positioniseverything.net/easyclearing.html

Upvotes: 1

Pekka
Pekka

Reputation: 449385

Give the container a 

overflow: auto

or

overflow: hidden

see this page on quirksmode.org for details on the issue.

Upvotes: 25

Jan Hančič
Jan Hančič

Reputation: 53930

Add overflow: hidden; to the .container selector. This will force the container to acknowledge that it has children.

Upvotes: 39

Related Questions