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.
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'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)
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
I want to make three columns in HTML+CSS, first 15%, second 70% and third 15%. The problem is that with my code, third column is wrapping down when i resize window. I've written such CSS for my website:
.maincont {
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.lcol,
.rcol,
.content {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.lcol {
width: 15%;
background-color: red;
}
.rcol {
width: 15%;
background-color: green;
}
.content {
width: 70%;
background-color: blue;
}
HTML code:
<body>
<div class="maincont">
<div class="lcol">
</div>
<div class="content">
</div>
<div class="rcol">
</div>
</div>
</body>
What am i doing wrong? Thanks in advance.
#Maccath is absolutely correct. Instead of changing any of your numbers however, might I suggest adding this to the top of your CSS file:
* {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Support for everything newer than IE8 - your widths and heights will incorporate paddings.
Also, change your margin numbers in your CSS to padding instead and you'll get your desired result.
The margins on .content are your problem. Margins are adding to the width of your overall content, so it's 20px over 100% width in total, which is why it's forcing the columns to wrap.
I would advise to use a percentage margin on .content instead. Reduce .content's width to, say, 66% and then set the margin to ... 0.66% (weird maths since it's relative). This however does have the disadvantage that the gaps between your columns aren't going to be consistent based on the width of the browser window.
remove
margin-left: 10px;
margin-right: 10px;
it resizes div size and summary it is more than 100%
How can I achieve a layout like this?
Right now I'm using this HTML:
<div class="image">
<img>
<div class="caption">
Caption Text
</div>
</div>
And this CSS:
.image {
background-color: #2A2A2A;
}
img {
max-width: 590px;
}
But the .image box is too big (since it expands to fit its parent):
The key is to not set a width for the img element, or the parent container. If the parent, .image is simply floated or in any other way adapted so that it shrinks to the size of its contents, this should work.
I used float to achieve the shrink-wrap aspect, but position: absolute; would do the same, as would display: inline-block;.
There's a demo over at JS Bin, which uses some jQuery to swap the images around, but it does nothing to the width of any elements. The CSS is reproduced below:
.image {
float: left; // for the shrink wrap
padding: 1em; // To achieve the bordered effect
background-color: #666; // just for contrast
-moz-border-radius: 2em; // for that web 2.0 goodness...
-webkit-border-radius: 2em;
border-radius: 2em;
}
.image img {
-moz-border-radius: 2em; // no width, anywhere. Presumably width: auto, would
-webkit-border-radius: 2em; // work, but that's redundant, since it's the default
border-radius: 2em;
}
.image img + .caption {
width: 100%; // forcing the .caption to take up 100% of the width
background-color: #ffa; // of its parent, except for the padding, so that it's
} // the same width as the image above.
As #Kyle said, block elements adjust their width to fit their parent's.
Setting a block element as inline though, is not the correct approach: what you need to do, is to set the .image div as a floating element, thus achieving a similar result, while keeping the features of a block element. The css to do the trick should be:
.image {
float: left;
display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */
/* whatever code you may find appropriate in order to render the rounded border */
}
.image .caption {
clear: left;
}
I left to you any further style improvement you may feel needed.
If you set the width of the .image box to the same width as the image, then apply padding to the .image box, you will get the border you are looking for because when you specify width, padding gets added to it.
So basically, you would need the following CSS:
.image {
padding: 10px;
width: 300px; /* assuming the picture is 300px */
}
Try the following:
.image {
position: relative;
width: 250px;
}
img {
border: 15px solid #777777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 100%;
}
.caption {
border-left: 15px solid #777777;
border-right: 15px solid #777777;
border-bottom: 15px solid #777777;
position: absolute;
width: 100%;
bottom: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div class="image">
<img src="yourImage" height="150px" />
<div class="caption">
Caption TextCaption TextCaption TextCaption TextCaption Text
</div>
</div>
Now the reason I have applied 3 borders to the caption div is because you do not know the width of the image without the border, but you do know the width of the border for the image. Applying the same border to the caption will give the caption the same width. Of course you will need to adjust the width of .image and the height of the img tag (this can be done through css), but the rest will be done for you. Also the caption div will resize for larger captions.
Regards,
Richard
PS this code has been tried and tested in Chrome - it works fine.
Since divs are block-level elements, they expand to fit their parent.
It may not be the best solution, but if you don't know the size of the image ahead of time, you could do the below:
.image
{
padding: 10px;
max-width: 590px;
disply: inline;
}
.caption
{
background-color: #2A2A2A;
disply: inline;
}
The above will cause the img div to be rendered as an inline element which will shrink it to fit the content rather than its parent, and the padding will add the border.
I have come up with another solution. I dont believe David Thomas' answer makes the caption appear within the image (by all means correct me if I am wrong), so try the code below (I have used a combination of my code and Davids).
.image {
position: relative;
float: left;
border: 15px solid #777777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.caption {
position: absolute;
bottom: 5px;
left: 5px;
}
.image-container {
position: relative;
}
<div class="image">
<img src="/Images/header1.png" />
<div class="caption">
Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text
</div>
</div>