All geek questions in one place

CSS float prevents page expansion

This is a very common scenario, I think.

I'm relatively (not a pun) new to CSS, and I have a problem with float alignment. I have two divs, one of which will contain the main content for swimming left, and the other for navigation, which should be floating right.

Anyway, this is what happens when I don't use CSS formatting. This is the desired behavior; the page will scroll as expected:
Desired behavior

Here's what happens when I apply to float: leftor float: rightto the relevant elements:
Unwanted page overflow

They both overflow the page. I want him to stretch the page so that it scrolls down if it is not suitable for one area of ​​the screen.

Excerpt from my HTML:

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

And the corresponding CSS:

#content {
    padding:10px;
    padding-top: 110px;
    padding-bottom:60px;   /* Height of the footer */
}

#main {
    padding: 10px;
    float: left;
    width:70%;
    text-align:left;
}

#secondary {
    padding: 10px;
    float: right;
    width:20%;
}

Why is he doing this and how can I fix it?

+3
source share
5 answers

Clean the floats and everything will be fine.

For example, according to your example:

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>

    <!-- clear -->
    <div style="clear:both;"></div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

Update: for older IE browsers, the div divider may need the height defined to assign it the hasLayout property, otherwise it will ignore this div. http://www.satzansatz.de/cssd/onhavinglayout.html

Typically, people make a class definition that has all this information, so you only need to enter <div class="clear"></div>

CSS http://sonspring.com/journal/clearing-floats

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

div <div>, , , .

0

div, 1000 , , .

<body>
<div id="wrapper" class="clrfx">
    <div id="header"></div>
    <div id="content">
    <div id="main" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

CSS

.clrfx:after {
    clear: both;
    display: block;
    content: "";
}

, class= "clrfx" Div, , . <div class="clear"></div>, , , .

, ,

<br class="clear" />

+1

, CSS: . #content , .

<div style="clear:both;"></div> div#secondary , . div , , #main , . . Yuji answer .

0

, , overflow: visible.

You can place the dummy element under the floating elements (forcing the dummy element to the desired location using the property clear), or you can set the parent element to something other than overflow: visible.

0
source

To make your wrapper contain all floating elements, just set;

#wrapper {overflow: hidden;}

Simple and you're done. No extra markup.

0
source

Source: https://habr.com/ru/post/1784840/

More articles:


All Articles