Hi guys, I'm here again with my psd to html / css template.
now i have a strange issue is simple to explain but difficult to deal with.
i have tow tags (.iconSearch and search classes ) in one form, and i want to float them at right but when i do that, i get an extra margin in top despite i set 0 on margin-top, this the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body , html{
height : 100%;
width : 100%;
margin: 0;
padding :0;
}
body
{
height : 100%;
width : 100%;
background-color : #d0d0d0;
padding : 0 20px;
box-sizing : border-box;
}
* , *::before , *::after
{
box-sizing : inherit;
}
.container
{
background-color : #ffffff;
border-top : 10px solid #894aa3;
/*border-bottom : 55px solid #444444;*/
height : 100%;
width : 100%;
margin: 0;
display : table;
/*padding : 0 30px;*/
position : relative;
}
.iconSearch
{
background-color : #ebebea;
background-image : url("../img/searchIcon.png");
background-repeat: no-repeat;
background-size : 15px 15px;
background-position: center;
width : 28px;
height : 28px;
border-radius: 0 0 7px 0;
margin : 0 30px auto auto;
float : right;
border : 0;
}
.search
{
margin: 0;
float : right;
width : 188px;
height: 28px;
border : 0px;
background-color: #ebebea;
border-radius: 0 0 0 7px;
}
</style>
</head>
<body>
<form>
<div class="container">
<header>
<form>
<input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
</form>
<h2 class="utopic-flowers">
<span>u</span>topic <span>f</span>lowers
</h2>
<span class="utopic-flowers2">free PSD webSite template</span>
<ul class="navbartop">
<li><a href="#">home</a></li>
<li><a href="#">style demo</a></li>
<li><a href="#">full width</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">gallery</a></li>
</ul>
<div class="headerText">
<p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
</div>
</header>
</div>
</form>
</body>
</html>thank you in advance.
