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
Related
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 recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I'm building the traditional todo list app in an effort to increase my understanding of Vuejs. Most of the functionality is working as expected, however my todo items are not displaying properly. Each item should have a "delete" button that shows up on the right side of its row, but the buttons are bleeding into the row below (see image).
What irks me is that the checkboxes are displaying properly, but the buttons are not. I've tried changing all the css for the buttons to that for the checkbox, but this didn't work
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
App.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
#include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
#include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
Here's how the buttons are displaying.
You can see the below code.
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>
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.
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/