How to make div blocks not floating using CSS?


Tags: css,html,css-float,height

Problem :

Layout.cshtml

<section id="main">
        <div id="sidebar">
            @{Html.RenderAction("CategoryMenu", "Store");}
        </div>
        <div id="content">
            @RenderBody()
        </div>
    </section>

style.css

...
    #main {
        padding: 30px 30px 15px 30px;
        background-color: #fff;
        -webkit-border-radius: 4px 0 0 0;
        -moz-border-radius: 4px 0 0 0;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }

    #sidebar {
        display: block !important;
        width: 15%;
        float: left;
        font: bold 20px arial, verdana;
        background: green;
        height: inherit !important;
    }

    #content {
        display: block !important;
        float:none;
    }
...

I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?



Solution :

Sidebar is floating left, so it will be taken out of the DOM flow and set up to the left. If you don't want #content to appear next to it then you need to add clear: both to #content style. That will force it to clear any floats around it and appear on the next line. However, it will not stop #sidebar from floating and there will be nothing next to the sidebar.

Can you clarify what you are trying to do since you are specifically setting #sidebar to float:left but then asking how to make them not float.


    CSS Howto..

    Print CSS: How do I open a new tab of the current page and append CSS?

    how to make a double hover effect with css

    CSS - How to float correctly into pseudocolumns

    How to display message inline

    How can I simply add a css file to change the background color for my shiny app

    how to make smooth css transition

    How to animate my element in my case?

    How do I let a div fill in the blank space

    How to use -webkit-appearance: searchfield-results-decoration?

    How to code CSS for all browsers in jQuery.css() method?

    CSS - How to upscale Unicode arrows?

    How to make nav and right block fixed, also keep the whole container is in center?

    How can I replace text value to star

    How do i select rows that correspond to a rowspan?

    How to make html to fill full screen height on webview in android browser

    How to do a “true” carbon fiber CSS background

    How to style jQuery UI's autocomplete list for mouse leave event?

    how to use css to style a descendant (not a direct child) of an element?

    How to reach CSS zen?

    How would you style this html so that everything falls into a table?

    How to process which button is selected in an HTML form?

    How to include SASS into CSS

    How can I line up the two containers in view?

    ExtJS 4.2 How to set grid filter height when header text is wrapped?

    How to show/hide big image by clicking on thumbnails?

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How to notify view from model to change a value in backbone

    webkit animation play state: how to start/stop animation on demand with javascript

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina