icon position work's fine on chrome. but on mozzilla, the icon move from the position. the question is, how to implement this code to mozilla firefox? is there a difference for chrome or mozzilla? The css code is below
.searchbar-1{
float: right;
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
margin-right: 120px;
margin-top: -4px;
}
.searchbar-1 input#search{
width: 300px;
height: 40px;
background: #E6E7E9;
border: none;
font-size: 10pt;
font-style: italic;
float: left;
color: #63717f;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchbar-1 input#search::-webkit-input-placeholder {
color: #65737e;
}
.searchbar-1 input#search:-ms-input-placeholder {
color: #65737e;
}
.searchbar-1 .icon{
position: absolute;
top: 0%;
margin-left: 12px;
margin-top: 9px;
z-index: 1;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="searchbar-1">
<span class="icon"><i class="material-icons" (click)="applyFilterCustom(search)">search</i></span>
<input type="text" [(ngModel)]="search" id="search" placeholder="Where would you like to go next?" name="search" (keyup.enter)="applyFilterCustom(search)" />
</div>
Whenever you use position: absolute; you must have to define position. in your case you have defined the top position but not left or right so based on your requirement you have to define any of them. which will resolve your issue for browser.
Related
i have a form page and it contains few drop-downs, upload and input text fields(for demo i am showing only few elements). i have a change mode button after the attack type dropdown its functionality is not mentioned but while zooming in zoom out that change mode button not maintaining alignment with other elements.
I tried with margin-left in pixes, percentile, and position: absolute, fixed but not working
Please help me with this issue.
This is My HTML Code:
<html>
<head>
<style>
label {
display: inline-block;
margin-left: 30px;
width: 22%;
font-family: Helvetica;
font-weight: bold;
font-size: 12px;
padding: 5px;
}
#attackType {
width: 158px;
border: none;
height: 30px;
background-color: #A9A9A9BF;
border-radius: 2px;
}
#changeCustomPcapModeDiv {
margin-left: 550px;
height: 29px;
margin-top: -29px;
border: none;
border-radius: 3px;
background-color: #A9A9A9BF;
}
#customPcap {
width: 200px !important;
}
.error {
color: red;
}
#attackConfigBtn,
#cancelBtn {
width: 80px;
height: 30px;
padding-top: 4px;
border: none;
background-color: #A9A9A9BF;
border-radius: 3px;
}
#attackConfigBtn {
margin-left: 25%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
#cancelBtn {
width: 70px;
margin-left: 3%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<label>Attack Type:</label>
<select name="attackType" id="attackType">
<option value="attack_list">Attack List</option>
<option value="custom_pcap">Custom PCAP</option>
</select>
<button id="changeCustomPcapModeDiv" style="display: block;">Change Mode</button>
</div>
<div style="margin-top: 10px; display: block;" id="customDiv">
<label>Custom PCAP Uplaod: </label>
<input type="file" name="customPcap" id="customPcap" accept=".pcap" data-max-size="102400"><span id="customPcapErr" class="error" style="margin-left:35px;font-size:14px;"></span>
</div>
<input id="attackConfigBtn" type="button" value="Apply" title="Apply new configuration">
<button id="cancelBtn" onclick="window.location = 'index.php'" title="Ignore configurations changes">Cancel</button>
</body>
</html>
and these are the images of my Sample page:
Please help me since i am new to HTML
Thanks
I'm very new to css, html and asp.net. I'm trying to clone a website in order to learn web tech concepts. Well, when i write everything in inline css, everything works fine. But when put these inline css codes into an external file, it's all messed up. How can i fix this? I always face this trouble when I use external css. Some of my previous codes are affecting my following or later codes and I face this trouble.
I don't understand how css works. I use classes with dots, ids with # but can't uderstand yet how to put them in an order between my html codes.
I want to add a JSFiddle When I hover on recipes there's a new div pops up. There are 3 new divs in that popped up div. The 1st div has a list holding the info of soup, legume etc. I want those 3 divs stay next to each other. I want to be able to style them. I don't know how to style nested elements by using class and id. This leads to trouble. To clarify nested elements have a look at this please:
div
paragraph
div
list
a
how to style these elements from an external CSS file instead of inline CSS such as style="bla bla bla"
here's my codes and pics.
.auto-style1 {
width: 100%;
}
.aMain {
text-decoration: none;
color: black;
background-color: #ddd6d6;
display: inline-flex;
width: 100px;
height: 30px;
font-size: 13.5px;
justify-content: space-between;
align-items: center;
margin-left: 180px;
}
.divLogin {
border-style: solid;
border-width: 1px;
height: 46px;
width: 120px;
float: right;
margin-right: 180px;
margin-left: 16px;
margin-top: 12px;
background-color: #ffffff;
border-radius: 5px;
}
.pIcon {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.pLoginText {
float: right;
margin-right: 6px;
margin-top: 5px;
font-size: 15px;
text-align: center;
}
.divSendRecipe {
border-style: solid;
border-width: 1px;
width: 140px;
height: 46px;
float: right;
margin-top: 12px;
border-width: 1px;
background-color: #ff6a00;
border-radius: 5px;
}
.pSendRecipe {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.divSearch {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 46px;
float: right;
margin-top: 12px;
margin-right: 16px;
border-width: 1px;
background-color: #ffffff;
}
.divSearch .divSearchContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 200px;
float: right;
margin-top: 2px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.divSearch:hover .divSearchContainer {
display: block;
background-color: #ffffff;
}
.divSearch .divSearchContainer span {
display: inline-block;
margin-left: 10px;
margin-top: 12px;
font-size: 18px;
font-weight: bold;
color: white;
}
.divSearch .divSearchContainer a {
display: inline-block;
background-color: #ddd6d6;
width: 80px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
}
.divSearch input[type=search] {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 360px;
padding-left: 6px;
float: left;
}
.divSearch button {
all: unset;
cursor: pointer;
width: 46px;
height: 100%;
float: right;
font-size: 16px;
font-weight: lighter;
background-color: #d91616;
color: white;
text-align: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.divSearch button:hover {
font-size: 20px;
}
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
/*.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
float:left;
margin-top: 52px;
position: absolute;
display: inline;
}*/
/*.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}*/
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
.image {
height: 40px;
width: 40px;
border: none;
position: absolute;
top: 23px;
left: 42px;
}
<head runat="server">
<title></title>
<link href="testCSS.css" rel="stylesheet" />
<link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 30px; background-color: #ddd6d6">
<i class="fas fa-home"></i>MAIN PAGE
</div>
<div style="height: 70px; background-color: #ffffff">
<a href="mainPage.aspx">
<asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
</a>
<div class="divLogin">
<p class="pLoginText">
<strong>Log In<br />
or Sign Up</strong>
</p>
<p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
</div>
<div class="divSendRecipe">
<p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
<p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
</div>
<div class="divSearch">
<input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
<button><i class="fas fa-search"></i></button>
<div class="divSearchContainer">
<div>
<span>Popular Searchs</span><br />
cake
cookie
pasta
dessert
wet cake
browni
pastry
</div>
<div><span>My Last Searchs</span></div>
</div>
</div>
</div>
<div style="z-index: -1; height: 70px; background-color: #d91616;">
<table class="table">
<tr>
<td class="td">RECIPES<img class="image" src="pics/cook book.png" />
<div class="divContainer">
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
<ul>
<li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
</ul>
</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div3</div>
</div>
</td>
<td class="td">VIDEOS<img class="image" src="pics/camera.png" />
<div class="divContainer" style="margin-left:-124px;">videos</div>
</td>
<td class="td">TRENDS<img class="image" src="pics/trends.png" /></td>
<td class="td">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></td>
</tr>
</table>
</div>
<div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
this is what my codes do:
this is what i want it to do:
this is how my website looks.
when put these inline css codes into an external file, it's all messed up. how can i fix this? i always face this trouble when i use external css.
You can your css in a separate .css file and import it to your HTML file inside the <head></head> tags.
I think the below example explains it clearly.
Here I have my CSS in a separate .css file called myStyle.css. Then I have imported it to my HTML file. Remember in this example, both files are inside the same directory. Of course, you can put them anywhere and change the href accordingly.
/* myStyle.css */
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
</body>
The code share in the question
is not separating your CSS code into another file, but it is putting it inside the file as text, which is not evaluated as CSS. First, try to put that CSS code into a style tag as a proof-of-concept:
<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
margin-top: 52px;
float:left;
position: absolute;
display: inline;
}
.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
</style>
Once that works, you can proceed in separating the CSS code into a file.
Linking a CSS file
Let's create a CSS called style.css. Remember where it is and add this code to your head tag:
<link rel="stylesheet" href="/my/correct/path/style.css">
Now, load your page in the browser. Look at the Console of your Dev Tools. If you see an error that states that the file was not successfully loaded, then you have specified the wrong path. Fix the path until loading your page no longer complains about the file not being loaded correctly.
Moving the CSS
Now copy the inner content of your style tag discussed earlier and paste into your style.css. Don't copy the <style type="text/css">, nor the </style. Remove the style tag. Reload the page. Make sure that for now style.css does not contain anything else. Work until the page reflects your styling.
Resolve conflicts
Now, assuming that you have different external CSS that conflicts with your rule, the first question is: do you need the external CSS? If not, then don't load it. If yes, then adjust your rules to be more specific than the remote CSS's rules if you want your CSS to be reflected. Change your structure if necessary. Work on your structure and design bit-by-bit until you fix all conflicting rules and your page looks good.
Test in several browsers
When you are done with your changes, load your page in several browsers and see whether some browsers don't handle your design well. If so, find out what the problems are and fix them.
I have been trying to play with line-height, formatting input for all browsers, padding, vertical-align and so forth but my placeholder still is in the middle of the box. Any suggestions?
I tried testing my code within jsfiddle to see if maybe it's just my css file, however; the results are the same.
http://jsfiddle.net/f0o4bcnv/
#postdoc {
background-color: gray;
width: 780px;
height: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
margin-top: 30px;
margin-left: 30px;
padding-top: 30px;
float: right;
}
#postdoc label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 25px;
margin-bottom: 30px;
margin-left: 20px;
}
#postdoc input[type="text"] {
margin-bottom: 30px;
height: 300px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
vertical-align: top;
/*padding-top: 0;*/
/*line-height: normal;*/
/*line-height: none;*/
/*vertical-align: top;*/
/*-webkit-input-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-ms-input-placeholder: line-height: 1.5em;*/
}
#postdoc input[type="file"] {
margin-bottom: 30px;
height: 50px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black
}
#postdoc input[type="submit"] {
margin-bottom: 30px;
height: 45px;
width: 250px;
font-size: 30px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: blue;
border-radius: 5px;
text-shadow: 0 0 10px yellow;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif;
}
#postdoc input[type="submit"]:hover {
color: gold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prostylesheet.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<body>
<h1 class="name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>
<div id="header">
<div id="gradient">
<div class="nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class="container-fluid">
<ul id="nav1" class="text-left">
<li><strong>Home
</li>
<li>Technologies
</li>
<li>Programs
</li>
<li>Blog</strong>
</li>
</ul>
<ul id="nav2" class="text-right">
<li><strong>Sign In
</li>
<li>Contact</strong>
</li>
</ul>
</div>
<!-- end container-fluid-->
</div>
<!--end nav-->
</div>
</div>
<!-- end header -->
<form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">
<label>Comment:</label>
<input type="text" name="comment" placeholder="Comments">
<br>
<label>Text Document:</label>
<input type="file" name="documentfile" />
<br>
<input type="submit" name="submit" value="Post comment" class="button">
</form>
</body>
</html>
For this cases (multiline) you should use textarea:
<textarea style="height: 500px; width: 100%;">
Comments
</textarea>
Note: Input element only support single line.
I don't have an actual explanation for this. My guess would be the height distibutes evenly from top to bottom so the text sits in the middle. A solution would be to use padding instead:
#postdoc input[type="text"] {
margin-bottom: 30px;
/*height: 300px*/ //remove
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
padding: 0 0 50px; //add
}
FIDDLE
But if this is not for cosmetics and you're looking to let a user type a block of text, you should use <textarea></textarea> instead of <input/>.
You should use textarea instead of input.
Look this fiddle:
<textarea name="comment" placeholder="Comments"></textarea>
http://jsfiddle.net/f0o4bcnv/4/
To style the placeholder you can also use this css code:
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}
Note that only works on newer browsers.
I created a hamburger dropdown menu which was working until recently, which I'm guessing is due to a browser update in Chrome. So I'm looking into improving the stability of it across browsers. Now it does not display at all. In Chrome is looks like it is positioned correctly via the dev tools. (My website if anyone wants to inspect: http://alexandstein.com/main/dndchar ) I tried checking the Z-index, but it seems I've already set that to 30.
Here is the HTML for the navigation, which includes the hamburger menu.
<nav id="navigation">
<ul>
<span id="logo">
<li>Alexworks</li>
</span>
<span id="links">
<li>About-Meta</li><li>Projects</li><li>Music</li> </span>
<span id="hamburgerSection">
<li id="hamburger" class="menuFocused"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall">
</li>
</span></ul>
<div id="hamburgerMenu" style="display: block;">
<div id="controls">
<img height="35" width="35" class="textControls" id="smallTextButton" src="/resources/images/icons/TextIconSmall.png" alt="Small">
<img height="35" width="35" class="textControls" id="medTextButton" src="/resources/images/icons/TextIconMed.png" alt="Medium">
<img height="35" width="35" class="textControls" id="largeTextButton" src="/resources/images/icons/TextIcon.png" alt="Large">
</div>
<p>Table of Contents</p><p>
</p><ul id="tableOfContents"><li>Preface</li>
<li>Instructions</li>
<li>DnD Character Manager</li>
<li>Notes</li>
</ul>
</div>
</nav>
The pertinent CSS:
#hamburgerMenu{
background-color: rgba(30,30,30, 0.9);
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding: 9px;
width: 230px;
position: fixed;
top: 35px;
right:0%;
z-index: 30;
font-size: 12pt;
border-left-style: solid;
border-left-color: rgba(100,100,100, 0.5);
border-left-width: 4px;
overflow-x: hidden;
.textControls{
width: 35px;
height:35px;
margin-right: 5px;
display: inline;
background-color: white;
color: black;
text-decoration: underline;
text-align: center;
opacity: 0.5;
}
.textControls:hover{
opacity: 1.0;
}
}
Here is the navigation CSS if anyone wants to check the parent element for any quirks:
/*NAVIGATION BAR*/
#navigation{
min-width: #MIN-WIDTH;
list-style-type: none;
text-align: center;
width: 100%;
margin: 0%;
padding: 0%;
padding-top: .3em;
position: fixed;
top: 0px;
right:0px;
z-index: 10;
background-color: black;
height: 35px;
overflow-y: hidden;
overflow-x: scroll;
ul{
margin: 0%;
padding: 0%;
padding-top: 0%;
}
a{
margin-top: 5px;
margin-right: .4em;
color: #HEADER_TEXT;
}
a:visited{
color: #999;
}
a:hover{
color: #bbb;
}
li{
display: inline-block;
width: 13em;
height: 1.8em;
border-bottom-style: solid;
border-bottom-color: red;
}
li:hover{
background-color: #333;
}
.iconSmall{
width: 30px;
height:30px;
}
#logo{
display: inline-block;
text-align: left;
width: inherit;
float:left;
letter-spacing: 5px;
}
#links{
display: inline-block;
right: 0px;
}
#hamburger{
width: 30px;
border-bottom-style: none;
float: right;
}
}
The problem is the overflows on your #navigation element. With these overflows, you are telling the browser to not show anything outside the scope of the #navigation element.
The most likely reason why it was working before and isn't now is overflow-x and overflow-y are still experimental (and also not backward compatible). I'd recommend taking them out.
Picture with the chrome inspector changes:
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/