html - Problems with centering divs -

-

i have 2 divs in page end want center second 1 between first , end ofthe page. this:

|   |          | |    | |  |   |          | |    | | |   |   div1   | |div2| | |   |          | |    | | |   |          | |    | |

"div 2" supposed centered between "div 1" , end of page. tried know , nothing worked.

my html:

    <!doctype html>  <html>  <head>      <link rel="stylesheet" type="text/css" href="teste.css" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script type="text/javascript" src="teste.js"></script>      <title>example</title> </head>  <body>      <div id="header">         <div class="title"">example</div>     </div>      <div id="main-body">         <ul class="nav-tabs">             <li class="active-tab"><a href="#">home</a></li>             <li><a href="#">menu 1</a></li>             <li><a href="#">menu 2</a></li>         </ul>      </div>      <div id="right-menu"></div>      <footer>     </footer>  </body>  </html>

and css:

/* fonte nunito ser usada no título */ @import url(http://fonts.googleapis.com/css?family=nunito);  /*----------------------------------------------*/  /* cor fundo da página */ body {     background-color: #cccccc; }  /*----------------------------------------------*/  /* header */  /* cor e tamanho */ #header {     background-color: #669966;     background-size: cover;     height: 100px;     width: 100%;     clear: both;     margin: 0;     padding: 0;     position: relative; }  /* título */ #header .title {     color: #cccccc;     font-family: nunito;     font-size: 50px;         font-style: italic;         line-height: 46px;     left: 60px;         top: 30px;     position: absolute; }  /*----------------------------------------------*/  /* tabs */ .nav-tabs {     background-color: #cccccc;     list-style-type: none;     margin: 0;     padding: 0;     display: flex;     justify-content: space-between; }  /* tab cells */ .nav-tabs li {     background-color: gray;     color: white;     font-size: 1.2em;     padding: 10px 90px 10px 90px;     border-radius: 8px 8px 0 0;  }  /* tab ativa */ .active-tab {     background-color: white;     color: red;     font-size: 1.2em;     padding: 10px 90px 10px 90px;     border-radius: 8px 8px 0 0; }  a:link {     color: white;     text-decoration: none; }  a:visited {     color: white;     text-decoration: none; }  /*----------------------------------------------*/  /* main body (this "div 1")*/  #main-body {     background-color: white;     height: 100vh;     width: 900px;     margin: 5px 0 5px 100px;     display: inline-block; }  /*----------------------------------------------*/  /* menu à direita(this "div 2") */  #right-menu {     border: 2px solid red;     background-color: yellow;     height: 30px;     width: 50px;     display: inline-block; }  /*----------------------------------------------*/  /* footah */  footer {     background-color: #333333;     height: 200px;     width: 100%;     margin: 0;     padding: 0; }

can please?

[edit] thank posted solutions. problem solved!

you getting close.

you need make 2 outer divs will, together, hold full width of page (one main column @ 70% wide, , 1 right column @ 30% wide). inside right column, place div fixed width , use text-align: center on outer div.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more