Wrapper question when containing floating divs

后端 未结 4 1894
孤街浪徒
孤街浪徒 2021-01-05 19:00

I would like to create a, browser centered, bordered, wrapper that autoexpands in height around various divs. When using floats to keep the divs in-line, the wrapper just st

相关标签:
4条回答
  • 2021-01-05 19:27

    You need to add an element with clear:both after the divs.

    Demo

    0 讨论(0)
  • 2021-01-05 19:29

    You can add something like <br style="clear:both" /> as the last element in your wrapper to force it to wrap around your elements that are outside the content stream.

    <div id="wrapper">
    
    <div id="header">test header</div>
    <div id="navbox">test navbox</div>
    <div id="column1">test column1</div>
    <div id="column2">test column2</div>
    
    <br style="clear:both" />
    
    </div><!--Close_wrapper-->
    
    0 讨论(0)
  • 2021-01-05 19:34

    I would use the :after psuedo class like below. It seems a bit more obvious what is supposed to happen and a bit less like browser weirdness. I'm sure not that overflow solution is officially supposed to work.

    #wrapper:after {
        clear:both;
        display: block;
        content: " ";
    }
    
    0 讨论(0)
  • 2021-01-05 19:38

    The answer to questions that contain float and wrap in one sentence is usually

    overflow: auto
    

    :)

    If you want your wrapper to auto-expand in height, that should do it.

    0 讨论(0)
提交回复
热议问题