How remove space on around content (css)?


Tags: html,css,twitter-bootstrap,twitter-bootstrap-3

Problem :

Please view this example :

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #abebff;
    padding: 0;
    height: 100%;
}

.box {
    border: 1px red dotted;
}

#side-menu {
    background-color: #204d74;
    padding: 0px;
}

#side-menu h1 {
    color: whitesmoke;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
}

.display-table {
    display: table;
    padding: 0px;
    height: 100%;
}

.display-table-row {
    display: table-row;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%;
}

.valign-top {
    vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid display-table">
    <div class="row display-table-row">
        <!--Side Menu-->
        <div class="col-md-2 display-table-cell valign-top" id="side-menu">
            <h1>Navigation</h1>
        </div>
        <!--Content-->
        <div class="col-md-10 box display-table-cell valign-top">

        </div>
    </div>
</div>

<script src="jquery/jquery-1.12.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

I try to create simple admin panel but can not understand how can remove free spaces around html page ? I used padding or margin and other css elements but not fixed . please help me . Thank you .



Solution :

The code seems fine except you have not given a width to your display-table div. Change it like so:

.display-table {
    display: table;
    padding: 0;
    height: 100%;
    width: 100%; //added
}

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #abebff;
    padding: 0;
    height: 100%;
}

.box {
    border: 1px red dotted;
}

#side-menu {
    background-color: #204d74;
    padding: 0px;
}

#side-menu h1 {
    color: whitesmoke;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
}

.display-table {
    display: table;
    padding: 0px;
    height: 100%;
    width:100%
}

.display-table-row {
    display: table-row;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%;
}

.valign-top {
    vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid display-table">
    <div class="row display-table-row">
        <!--Side Menu-->
        <div class="col-md-2 display-table-cell valign-top" id="side-menu">
            <h1>Navigation</h1>
        </div>
        <!--Content-->
        <div class="col-md-10 box display-table-cell valign-top">

        </div>
    </div>
</div>

<script src="jquery/jquery-1.12.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>


    CSS Howto..

    How to separate CSS positioning from CSS styling?

    how to center text vertically in html using css only

    How to implement z-index and overflow

    How do I take code from Codepen, and use it locally?

    How to override CSS in joomla template

    How do I wrap a overflowed span in fixed div

    HTML CSS how to adapt text on a Div's size [closed]

    Show/Hide & Change CSS functions are not working

    How to change Google Chrome Arabic default font in css?

    How to center verticaly n inline containers with different font-size?

    How to fit HTML table row to its content

    How to prevent outer
    CSS from affecting inner
    CSS

    How to make a circular image in css

    CSS/HTML problem in IE - how to fix?

    CSS exit box how to? [closed]

    How to use EMs in CSS Media Queries aligned with JavaScript events?

    How I do edit the css for just the home page on Magento?

    How does jQuery's toggle function work, how to write it in javascript without jquery?

    Jquery - 100% width slideshow whilst keeping the height propotional

    Ask Toolbar preventing Bootstrap Modal to show

    links are showing up on each line, instead of inline

    How can I center-align text with uneven icons either side?

    How to print text between css selectors in golang using html package?

    How can i make a fixed box inside a div with scroll?

    How to fix parent hover issues with CSS?

    how to overwrite RadWindow control CSS classes with mine?

    How to remove the default active tab color when another tab is active using jquery

    How to move object into the screen from outside via jQuery transition

    How to hide div for specific height or width using CSS [duplicate]

    How to refactor an existing project to use Compass?