How to put a div with page content on the side of the vertical menu that came included?

Question

How to put a div with page content on the side of the vertical menu that came included?

Navigation

#1 by (1 votes)

1

I have the following structure, for now:

Thesidemenucamewithinclude_once'menu.php'andthepagewe'reviewingishome.php.

MenuCSS:

.longBarVertical{width:180px;min-height:100%;background-color:transparent;border:1pxsolidblue;float:left;}.logoMenu{margin-top:15px;}.logoMenuimg{width:50px;}.menuVertical{position:relative;width:180px;padding:0px;list-style:none;overflow:hidden;margin-top:15px;}.menuVerticallia{padding-left:15px;line-height:45px;display:block;overflow:hidden;position:relative;text-decoration:none;color:rgb(225,225,225);border-left:5pxsolidtransparent;}.menuVerticalli:hovera,.menuVerticalli:hoverai{color:black;-webkit-transition:all0.15slinear;-moz-transition:all0.15slinear;-o-transition:all0.15slinear;transition:all0.15slinear;}

Somaybeeverythingisright,whatIwouldlikewastobeabletoputthedivinredthatiswritten"Home" next to the side menu and be able to put widht: 100% . As it is in print, it has width: 200px (for example only) and if I put width: 100% , the div is under the side menu, which is not what you want.

Codes of div in red, can also be called "content":

<div style="background-color: red; width: 200px; float: left;">
    <h1>Home</h1>
</div>

Maybe I can not put width: 100% to div "content", if it is not, how can I make the "content" div be on the right side of the menu and occupy the rest of the screen? (The rest would be from the menu border to the right side of the page, something like a (hypothetically) width: 100%-180px .

Desired:

Note: I'm using the Bootstrap 4 framework.

css twitter-bootstrap

asked by anonymous 21.11.2017 / 04:29

1 answer

How to draw shapes with HTML5 and CSS, in the case: an arrow? Text box to determine amount of digit usage

score 1 · Accepted Answer

You can get the divs within div with class="row no-gutters" :

ul, li{
   margin: 0;
   padding: 0;
   list-style: none;
}

.longBarVertical {
    width: 180px;
    min-height: 100%;
    background-color: transparent;
    border: 1px solid blue;
    float: left;
}

.logoMenu {
    margin-top: 15px;
}

.logoMenu img {
    width: 50px;
}

.menuVertical {
    position: relative;
    width: 180px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    margin-top: 15px;
}

.menuVertical li a {
    padding-left: 0px;
    line-height: 45px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: rgb(225, 225, 225);
    border-left: 5px solid transparent;
}

.menuVertical li:hover a, .menuVertical li:hover a i {
    color: black;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="row no-gutters">
   <div class="menuVertical longBarVertical">
      <ul>
         <li><a href="">Link</a></li>
      </ul>
   </div>
   <div class="col" style="background: red;">
       <h1>Home</h1>
   </div>
</div>