I'm trying to style an Input tag and a DIV tag. The DIV will have to be below the input, and they need to have the same width. However, no matter what I do - the DIV is one pixel smaller than the INPUT.
This shouldn't be happening, especially if (in this example) the two objects are sharing the same CSS class. I know how to code CSS. I just have no idea what could be causing the input box to be just slightly bigger.
I've diddled and fiddled here: http://jsfiddle.net/r8pty4a8/
EDIT: I cannot simply offset by a pixel. The design is using VW units, which are a "responsive" CSS3 measurement unit. 1VW = 1% of the viewport width.
<div style="width: 100%; position: relative">
<input type="text" class="MyStyle" />
<div class="MyStyle">Foo</div>
</div>
.MyStyle
{
height: 6.09375vw;
line-height: 6.09375vw;
font-size: 3.05vw;
padding-left: 2.013vw;
width: 80vw;
border: .4vw solid red;
border-top-left-radius: .3vw;
border-top-right-radius: .3vw;
clear: both;
}
You forgot to account for the default padding-top/padding-bottom on the input element.
In Chrome, the element has a default padding-top/padding-bottom of 1px.
Updated Example - both elements now have the same height.
.MyStyle {
padding-top: 0;
padding-bottom: 0;
height: 6.09375vw;
line-height: 6.09375vw;
font-size: 3.05vw;
padding-left: 2.013vw;
width: 80vw;
border: .4vw solid red;
border-top-left-radius: .3vw;
border-top-right-radius: .3vw;
clear: both;
}
You could also use the shorthand - padding: 0 0 0 2.013vw. (example)
Related
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
i have a really annoying issue with sizing an input field and i don't understand how it works.
I got this code. HTML:
<div class="container">
<div class="receipt">
<p class="location"></p>
<input type="text" id="checkoutField">
<div class="checkoutButton">
<a href="#/checkout">
<p>some button</p>
</a>
</div>
</div>
</div>
The container got a max width of 480px. And i want both the checkoutButton div and the input field to stretch out to that width limit, while also having a 20px margin on both sides. The elements should also be responsive, which is why they doesnt have a fixed size.
This works fine on the div, but i cant get the input field to work the same..
I made a jsfiddle that includes the CSS code aswell: jsfiddle
Why is the input behaving like this and how do i fix it?
Instead of calling margin left & right to individual items, it's better call padding for parent container.
Chk the Modified code - http://jsfiddle.net/k7vzod4y/3/
.receipt {
padding: 0 20px 24px;
}
.receipt .checkoutButton {
margin: 0;
}
.receipt #checkoutField {
width: 100%;
margin: 0;
}
Hope that helps.
It is possible easily using CSS3 calc function.
You could set you width to 100% - 40px to take care of your margins.
Something like this:
.receipt #checkoutField {
width: calc(100% - 40px);
border: 0;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
}
You can see this in action in you updated fiddle
So after looking at your code example I would use the following method. I used the following on the JSFiddle you linked and it worked as you mentioned you wanted it to.
Set the width of the input field to 100%:
.receipt #checkoutField {
border: 0;
width: 100%;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
margin-right: 20px;
}
And then 100% width on the checkout button as well:
.receipt .checkoutButton {
width: 100%;
height: 50px;
background-color: #35aba2;
border-radius: 4px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
margin-top: -6px;
}
This method is also responsive because I have used percentages which are related units so they inherit from there parent. So a width of 100% will always stay at the full width of it's parent regardless of the viewport size.
I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.
The form is an 800px wide text input (785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.
The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.
Here is a JSFiddle.
CSS:
div.formdivholder {
width: 100%;
height: 70px;
padding-top: 20px;
}
div.formdiv {
width: 900px;
height: 70px;
margin: 0 auto;
}
input.text {
z-index: 20;
height: 38px;
width: 785px;
float: left;
padding-left: 10px;
border: solid;
border-width: 5px;
border-color: #3374DC;
border-right: 0px;
background-color: #F0F4FA;;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
input.submit {
z-index: 1;
height: 50px;
width: 100px;
float: right;
color: #F0F4FA;
font-weight: bold;
background-color: #3374DC;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-width: 0px;
}
HTML
<div class="formdivholder">
<div class="formdiv">
<form class="search" role="search" method="get" action="/searchresults.php">
<input type="text" name="input" class="text" placeholder="Search for">
<input type="submit" class="submit" value="Search">
</form>
</div>
</div>
Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):
input.text {
height: 50px;
width: 800px; /* OR even this: width: calc(100% - 100px) */
box-sizing: border-box;
....
}
Take a look in Fiddle.
Definition of the property value border-box:
The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode. Note: Padding & border will be inside
of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px
solid black;} RESULT {rendered in the browser} .box {width: 350px;}
You can see these days people drop support to IE8, so at the start of CSS they simply put:
*, *:before, *:after {
box-sizing: border-box;
}
(and make their life easier).
try using % instead of pixel, should do the trick, later on you might have to do some responsive so the % will save you time on that one also
I have the following button and input that I cannot figure out how to get on the same line.
I've highlighted the div in red. Here is the HTML anbd CSS that's controlling this:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<ul id="country_list_id"></ul>
<button class="btn2 btn2-warning" id="b3">HELP</button>
</div>
.input_container {
display: block;
width:49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
.btn2 {
display: inline-block;
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
display: inline-block;
padding-left: 40px;
width:49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
I've tried using a mix of display: inline and display: inline-block for these various elements but no matter how I cut it I these the HELP button and the INPUT box are never on the same line. What am I doing wrong?
Why? The reason they do not line up is because there is not enough room for all the elements to fit on one line.
Fix Understand what some of your CSS is doing. Your search form's container has the following CSS:
.input_container {
display: block;
width: 49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
which has a number of issues.
No need for display: block; as that's how a DIV displays by default.
width: 49%; will be 49% of it's parent element. i.e. 49% of parent width of 1000px = 490px, 49% of parent width of 500px = 245px
border-size should be border-width
Now onto your INPUT styles:
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
No need for display: inline as that's how a INPUT displays by default.
No need for position: relative as far as I can see.
margin: 0 20% will add a margin to the left and right side of your INPUT of 20% of it's parent element. If parent is 1000px then you're adding 200px of margin on each side of your input! This element alone would take up 690px ( 200px + 290px + 200px ) if the parent element was 1000px.
Now onto your UL styles:
.input_container ul {
display: inline-block;
padding-left: 40px;
width: 49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
Again you're using a percentage width so it will be based off of it's parent element, .input_container. If .input_container is 49% of 1000px parent element then .input_containerhas a 490px width and your UL will be 49% of it's parent width of 490px = ~240px.
Once you get rid of some of those percentage values, especially margin: 0 20% things will clear up a bit though there is a little more work to do.
Both your INPUT and BUTTON elements are inline and therefore will line up next to one another. Place the UL after them both.
Here is a jsFiddle with slightly modified HTML and CSS: http://jsfiddle.net/y475jx8b/2/
I left in some of your percentage widths as this is a demo intended to get you on the right track. You might be better off supplying a specific with depending on the final requirements.
.input_container {
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
height: 42px;
width: 290px;
}
.btn2 {
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
width: 49%;
margin: 0 auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
NOTE I've used jQuery Autocomplete before and I'm not sure you have to supply a UL in the markup. I believe it creates one for you.
EDIT 1 - Reply to OP's question in comments - How to center DIV?
Typically the easiest way to use margin auto along with specifying a width for the containing element. Below is what is most common:
width: 500px; /* can be some other unit like a percentage */
margin: 0 auto;
Above I'm using a shorthand version so I don't have to supply each side separately. 0 is setting the top and bottom margins and auto is setting the left and right margins. 0 is not required to center the element. You could do the following and it would still work, margin: 25px auto; or margin: 100px auto 25px.
When using the auto value for margin you must supply a width for that same element in order for it to center. This is because the browser will calculate your margin for you but it cannot do this if it does not know how much space the element wants to take up. For example, if the containing element (this could be a parent element that may or may not be based on the viewport width of your browser window) is 1000px and your element is 500px wide then it will calculate as follows:
(containing element) - (element width) = (space left for margins) / 2 = (margin width for each side)
so:
1000px - 500px = 500px / 2 = 250px for each side
Without a specified width it would look like this:
1000px - ? = ? / 2 = ? for margin on each side
Percentage widths are fine - let's say width: 30% so 30% of a parent width of 1000px = 300px. That would calculate as follows:
1000px - 300px = 700px / 2 = 350px for margin on each side
Now the catch with a percentage width is that if your containing element is 300px wide then 30% of that which is 90px might be too small. See below on how to handle this.
Now just plug-in a containing element width other than 1000px to get an idea of a variable width space like different browser sizes.
1500px - 500px = 1000px / 2 = 500px for margin on each side
750px - 500px = 250px / 2 = 12px for margin on each side
Now if your elements happen to have set widths, like the INPUT and BUTTON elements, and they total more than the browser width then they will create a horizontal scroll bar. This is where you would want to use a percentage width and (possibly) in conjunction with the max-width property so the element doesn't get too large. If it get's too small you could also use the min-width property as well.
Here is a jsFiddle demonstrating how to do this: http://jsfiddle.net/9gyq89ye/2/
Just change the input position.
Example:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()"> <button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
Your ul element is too wide (width: 49%). Even as inline-block, it will cause a line break if it wont fit on the current line.
If you want to align two elements next to each other in normal flow you should not be adding other elements in between them.
Also, you've set a static width: 290px for the input which will push the button down when the container is small, it is better to specify the width in %, maybe combined with a min-width (For the container as well).
Also, margin: 0 20%; is just too much, it'll take 40% of the width of container.
.input_container {
display: block; /*..... ? default ....... */
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
position: relative;
display: inline;
width: 80%;
height: 42px;
}
.btn2 {
display: inline-block;
line-height: 1.42857143; /*..... ? ....... */
margin-bottom: 0;
}
.input_container ul {
display: inline-block;
width: 49%;
margin: 0 auto;
padding-left: 40px;
z-index: 1; /*..... ? ....... */
border: 1px solid #eaeaea;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
As a side note, z-index doesn't have any effect on elements in normal flow. Also, you should specify a unit for values other than 0.
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/