How to make div blocks not floating using CSS?

Tags: css,html,css-float,height

Problem :


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


    #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;

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..

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to detect which button is clicked in javascript?

    How to get smooth Google fonts?

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How to override some CSS class settings

    how to stack elements using CSS

    How to prepend a div to another div using javascript

    How to get element by its partial class name CSS

    how to make triangle in css [closed]

    How can I correctly type css float?

    How to wrap the center content and make it take the remaining width of the div

    How to add specific CSS attributes to all text-containing elements

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    How to create smaller CSS files for easier handling while developing [closed]

    How to create cube with only HTML and CSS?

    How to adapt CSS image container to different browser sizes

    How to make a div take the remaining height without knowing the height?

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    How can I insert new text with a hyperlink into a page in CSS?

    How to override CSS Background that already has !important?

    How to exclude the container from this javascript code?

    How Do I make this JQuery window have a minimum size?

    How to modify how TinyMCE format text

    How to reset a slideshow after the last picture is shown

    How do you customise HTML select option menus? [duplicate]

    how to set css to a specific attribute of an input tag

    how to 3D rotate a 'a' tag?