I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
There is the code: jsfiddle
There is the CSS part. I tried different things to fix it.
*
{
margin:0px;
}
html,body
{
height:100%;
}
.wrapper
{
height:100%;
min-height:100%;
height:auto !important;
margin:0 auto -50px;
}
.footer,.push
{
height:50px;
}
.footer
{
background-color:lightblue;
}
.footer center
{
vertical-align:middle;
}
.header
{
margin-top:10px;
height:150px;
}
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline;
}
#meniu
{
margin-top:5px;
background-color:lightblue;
width:100%;
height:50px;
}
#meniu a
{
text-decoration:none;
}
.dropdown-content {
display: none;
position: absolute;
width:100%;
margin:0px;
}
.dropdown-content ul
{
height:100%;
width:100%;
position:relative;
list-style-type:none;
margin-top:20px;
left:-25%;
}
.dropdown-content li
{
position:relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
There is the the HTML:
<body>
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown"><li>FISIERELE MELE<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div></li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
They collapse because you have made them as inline elements. I think you meant inline-block, otherwise padding/margin would not render properly.
The correct code should be:
#meniu li {
⋮
display: inline-block; /* make `li` as inline-blocks */
margin-bottom: 10px; /* add spacing */
}
You also have some HTML syntax errors (extra li), please run it through a validator. My final result is:
* { margin: 0px; }
html, body { height: 100%; }
.wrapper {
height: 100%;
min-height: 100%;
height: auto !important;
margin: 0 auto -50px;
}
.footer, .push { height: 50px; }
.footer { background-color: lightblue; text-align: center; }
.header { margin-top: 10px; height: 150px; }
#meniu li {
padding: 5px;
border: 1px solid black;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
}
#meniu {
margin-top: 5px;
background-color: lightblue;
width: 100%;
height: 50px;
}
#meniu a {
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
margin: 0px;
}
.dropdown-content ul {
height: 100%;
width: 100%;
position: relative;
list-style-type: none;
margin-top: 20px;
left: -25%;
}
.dropdown-content li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015
</div>
jsFiddle: https://jsfiddle.net/azizn/snL1gwsm/
Hope i understood your question correctly...
i made some drop-down bar for you.
you can add elements as you wants, take a look on the html file and the css it will help you understand what is going on.
take a look :)
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color:lightblue}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You had an error in your html
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
</li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
https://jsfiddle.net/ggtpufuw/1/
After fixing the html you have to make your list display as inline-block and margin them as you like.
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline-block;
margin-top:10px;
}
Related
I have a school project to build a website. I'm trying to make the navbar and the header background different colors but it doesn't seem to reach the end of the page. I attached a screenshot where you can see that my headers background color(white and gray) didn't reach the end and you can still see the blue background. attaching my code aswell:
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
Home
</li>
<li>
Details
</li>
<li>
On Me
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
Csgo
Roblox
Minecraft
Valorant
</div>
</div>
</li>
<li>
Contact me
</li>
</ul>
</div>
</body>
</html>
this is the html
css is:
body {
background-color: darkcyan;
font-family: Calibri;
}
.Headers{
background-color:white;
}
#secondheader{
margin-top:0px;
margin-bottom:1px;
opacity:50%;
}
.Menu{
background-color:gray;
}
.Menu a{
background-color:gray;
font-size:20px;
padding:4px;
padding-right:15px;
text-decoration:none;
color:black;
}
.Menu a:visited{
color:black;
}
.Menu a:hover{
background-color:white;
}
.Menu ul{
margin-top:0px;
padding-left:0px;
}
.Menu li{
display:inline;
padding:5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:white;
min-width:160px;
z-index:-1;
}
.dropdown-content a{
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
Picture of the website
In most major browsers, the default margin is 8px on all sides.
So it is needed to override that margin CSS attribute to remove the space on the header.
body {
margin: 0;
}
Also h1 tag has got default margin-top and margin-bottom so you need to override that styles too.
<h1 style="margin-bottom:0px;margin-top: 0;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
body {
background-color: darkcyan;
font-family: Calibri;
margin: 0;
}
.Headers {
background-color: white;
}
#secondheader {
margin-top: 0px;
margin-bottom: 1px;
opacity: 50%;
}
.Menu {
background-color: gray;
}
.Menu a {
background-color: gray;
font-size: 20px;
padding: 4px;
padding-right: 15px;
text-decoration: none;
color: black;
}
.Menu a:visited {
color: black;
}
.Menu a:hover {
background-color: white;
}
.Menu ul {
margin-top: 0px;
padding-left: 0px;
}
.Menu li {
display: inline;
padding: 5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: -1;
}
.dropdown-content a {
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;margin-top: 0;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
Home
</li>
<li>
Details
</li>
<li>
On Me
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
Csgo
Roblox
Minecraft
Valorant
</div>
</div>
</li>
<li>
Contact me
</li>
</ul>
</div>
</body>
Make sure you add this to your style:
*
{
padding: 0%;
margin: 0%;
}
If you have any more questions, be sure to ask!
Have a great day :)
I have a simple nav menu at the top of a page I'm working on. I want one of the links on the nav menu to have a dropdown menu pop up underneath it when you hover over it.
I have the drop down menu appearing just fine. The only problem is that the drop down menu items are the width of the entire page instead of the width of a nav menu item. I'm not sure what's causing it...
Here is the html and css for the nav menu and drop down menu:
.dropdown {
float: left;
background-color: #FFF0F5;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 300px;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
width: 300px;
overflow-x: hidden;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
As you can see It's a bit of a mess since I've been adding lots of things trying to think of something to fix this width issue. Any help is greatly appreciated!
Your code worked fine for me. Looks like some other CSS in your code is making it full width. Have you tried fixing it with "!important" or "max-width"?
You should create dropDiv in the li tag and make it absolute position to get the parent widht
nav ul {
padding:0;
margin:0;
}
nav ul li {
list-style: none;
float: left;
position: relative;
margin: 0 5px;
}
nav ul li a{
color: #000;
text-decoration: none;
}
.dropdown {
float: left;
background-color: #FFF0F5;
}
nav ul li:hover .dropDiv {
display: block;
z-index: 1;
height: 200px;
width: 300px;
overflow-x: hidden;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
.dropDiv {
position: absolute;
width: 100%;
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropDiv a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropDiv a:hover {
background-color: #fff8dc;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">History
<div class="dropDiv">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
Hello just define width for nav bar as you want I've defined 700px. and add some css . check this code
.dropdown {
float: left;
background-color: #FFF0F5;
}
.dropDiv {
position: relative;
display: inline-block;
list-style: none;
padding: 9px;
float: left;
max-width: 100%;
}
.dropdownContent {
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
overflow-x: hidden;
top: 30px;
left: 10px;
position: absolute;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
nav {width:700px;float: left;}
nav > ul > li { float: left;
padding: 9px;list-style: none}
ul{float:left;}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
I think this is what you want.
I am trying to display some content in div tag when hovering on the menu. Here I am trying to display a div when hovering on About. But it does not work.Kindly only check the commented portion. Ignore rest!
Here is my html:
<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li >Center</li>
<li >Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>
And CSS:
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
Here's a jQuery option if you go that route..
fiddle
https://jsfiddle.net/Hastig/ns6j55zg/
You can read about .hover here
$('.dispmenu').hover(function() {
$('.submenu').addClass('dispmenu-hover');
}, function() {
$('.submenu').removeClass('dispmenu-hover');
})
body {
margin: 0;
}
.container {
/*width: 1000px;*/
/*height: 1000px;*/
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
background-color: #e0e0d1;
margin-top: 40px;
/*width: 96px;*/
flex: 1;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li>Center</li>
<li>Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
</ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
.dispmenu:hover .submenu {
You have a space between those selectors. A space is a descendant combinator.
The element <div class="submenu"> is not a descendant of the element <li class="dispmenu">. It is a sibling of the great-grandparent of the list item.
CSS selectors provide no way to describe going up the DOM tree, so you can't achieve this without either:
Changing the structure of the DOM
Using JavaScript
Ideally you should do both since:
It doesn't make much sense for a submenu to be completely disconnected from the menu item it is for. Think about how that type of data is normally represented.
You can't put in things like time delays before a menu vanishes, which makes a menu like the one you are trying to create challenging for people with some accessibility needs (e.g. sufferers of arthritis who many struggle to move the mouse in a straight line and keep the pointed inside the borders of the menu).
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.