Home/ Questions/Q 8197901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T05:50:15+00:00

I have an outer div and in it i have two inner divs to

  • 0

I have an outer div and in it i have two inner divs to hold a logo and navigation.I have created this fiddle http://jsfiddle.net/thiswolf/ZBMhr/1/

I want the navigation to to be centered based on the logo div.Here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Center Depending on another div</title>
  <style type="text/css">
  .container {
      margin-left:2%;
  }
  .outer {
      position:relative;
      height:100px;
      width:100%;
      background-color:orange;
  }
  .inner-left {
      position:relative;
      float:left;
      height:80%;
      width:200px;
      background-color:green;
      margin-top:10px;
      margin-bottom:10px;
  }
  .inner-right {
      position:relative;
      height:40%;
      width:auto;
      float:right;
      background-color:pink;
  }
  </style>
  <meta charset="uft-8">
</head>
<body>
   <div class="container">
      <div class="outer">
         <div class="inner-left">
            <h1>Logo</h1>
         </div>
         <div class="inner-right">
            <p>Navigation</p>
         </div>
      </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As long as your navigation div is 40% high, using 

    margin-top: 30%;
position: absolute:
right: 0;

    should be sufficient, as 40% + 30% + 30% equals the full height.

    When the outer container is positioned relatively, the inner elements can be positioned absolutely in relation to the parent.

    If you want to give the element a fixed height, you can try this:

    margin-top: 50%;
height: 40px;
top: -20px;
    • 0