CODEWITHSUNDEEP
htmlcss
IIDev
IIDev

Reputation: 1

Div moves down when html is added

You guys will probably be able to answer this in a heartbeat but I have spent days trying to figure this out.

I am working on a responsive site and want to have a 3 column layout that changes width as the screen is resized. I have 3 divs defined: left 20%, center 59% and right 20% (99%). The divs are formatted correctly when they are empty (same height, same top and bottom alignment). When I add a menu to the 3rd column, it shifts column 3 down and aligns the bottom link to the bottom of the other two columns. If I vary the number of links, column 3 shifts down and aligns the bottom of the final link to the bottom of columns 1 and 2. All the reference examples are simple and work fine because they are very simple. Code and screenshot are attached.

Screen shot

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body {
   background-color:black;
}

/* Logo Styles                */
.divlogo {
   width:96%;
   height:71px;
   background-color: #444;
}

/* Drop Down Menu Styles      */
.column1 {
   display:inline-block;
   width:20%;
   height:400px;
   background-color:#888;
}
.column2 {
   display:inline-block;
   width:59%;
   height:400px;
   background-color:#444;
}
.column3 {
   display:inline-block;
   width:20%;
   height:400px;
   background-color:#888;
}

.ddm_menu {
   margin-left:auto;
   margin-right:auto;
   padding:0;
   list-style: none;
   font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
   font-size:14px;
   width:100%;
}
ul.ddm_menu li {
   margin-top:4px;
   margin-left:auto;
   margin-right:auto;
   width:160px;
   height:48px;
   position:relative;
   cursor:pointer;
   display:inline-block;
}
.ddm_toplnk {
   -moz-box-shadow:0px 0px 16px #fff inset;
   -webkit-box-shadow:0px 0px 16px #fff inset;
   box-shadow:0px 0px 16px #fff inset;
   border-radius: 8px;
}

ul.ddm_menu li > a {
   position:absolute;
   top:0px;
   left:0px;
   width:160px;
   height:48px;
   z-index:12;
}
ul.ddm_menu li span.ddm_wrap{
   position:absolute;
   top:8px;
   left:0px;
   width:160px;
   height:60px;
   z-index:15;
}
ul.ddm_menu li span span.ddm_link {
   color:#fff;
   font-size:24px;
   clear:both;
   margin:auto;
}

</style>

</head>

<body>
<center>

<div class="divlogo">
</div>

<hr width="96%">

<div class="column1">
</div>

<div class="column2">
</div>

<div class="column3">
   <ul id="ddm_menu" class="ddm_menu">
      <li>
         <a class="ddm_toplnk" href="#">
            <span class="ddm_wrap">
               <span class="ddm_link">Home</span>
            </span>
         </a>
      </li>
      <li>
         <a class="ddm_toplnk" href="#">
            <span class="ddm_wrap">
               <span class="ddm_link">Contact</span>
            </span>
         </a>
      </li>
   </ul>
</div>

</body>

</center>

</body>
</html>

ks

Upvotes: 0

Views: 196

Answers (1)

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

Remove display:inline-block from ddm_menu class change 

ul.ddm_menu li {
   margin-top:4px;
   margin-left:auto;
   margin-right:auto;
   width:160px;
   height:48px;
   position:relative;
   cursor:pointer;
   display:inline-block;
}

to

ul.ddm_menu li {
   margin-top:4px;
   margin-left:auto;
   margin-right:auto;
   width:160px;
   height:48px;
   position:relative;
   cursor:pointer;
}

enter image description here Hope this helps!

Upvotes: 1

Related Questions