I've tried the CSS below. All of the other specifications are working except the width. You can see an example of the being too wide here if you need to.
Thanks for your help - Tara
.title h2 {
margin:10px 0 0 0;
width:780px;
font-family: HarabaraHandItalic;
font-size: 30px;
padding: 0 0 0 15px;
color:#000;
}
The width you're using is too wide. Try to make the width 750px for example. You'll see that it works fine!
Keep in mind that the padding will be added to the width of the element.
In your case the h2 element is 780px (width) + 15px (padding-left) = 795px.
It is working fine here.
I suspect you are being confused about what width means. The property describes the content width. The padding (15px) and borders (0px) and margin (0) all appear around the width.
The container is only 670px wide anyway, so you probably don't want something that is 795px across (width plus padding) inside it.
You need to reduce both the "width" and the "font-size" to make it fit.
Or, if the font-size needs to stay the same, you need to reduce the amount of copy.
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
I'm having a problem with understanding how to properly use the percentage height property in CSS.
It has been a useful tool for me in the past, when sizing elements with respect to the page size.
However I have come across a problem when using percentages to specify properties of divs within divs.
For example,
<div class="outer">
<div class="inner">
Hello
</div>
</div
In the above code, I set the text of the "inner" class to have a top-margin of 5%, which successfully pushes the text down from the top edge of the "outer" class.
However, I was told that the 5% would be relative to the parent of the element, which I would assume would be "outer" (because it is within the outer div tags). It actually acts as 5% of the page height, which pushes it down much further than intended.
I'm probably missing some quirk of HTML/CSS, because I'm still relatively new to this, so any help would be appreciated.
Thanks in advance :)
edit: I now understand that the problem lies on certain parent elements not having static dimensions, however is there a way to avoid this but still have relative heights/widths on child elements? It would seem silly to define the body with a static height/width, which would just seriously limit the site's accessibility on devices with other dimensions.
Relevant CSS code for "outer" (bear in mind I just used outer/inner as examples, and below is the actual code I've been using)
.login_center_panel
{
width:50%;
height:30%;
background-color:#3D3D3D;
margin-left:auto;
margin-right:auto;
float:top;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
font-family: "Verdana", Arial, sans-serrif;
color:white;
padding:1px;
}
and below is the relevant css for "inner"
#signinGreetText
{
margin-top:5%;
}
The margin-top property of signinGreetText still acts as 5% of the whole page, and not as 5% of the height of login_center_panel
The % is based on the width of the containing element. You need to specify a width or max-width property for your .outer div or use a different measurement for your top margin.
To see how the % is based on the width change the width of the page while viewing your current code. The top margin should change with the width of the page.
Do you have a height set for 'outer'? If not, this is why the margin is bigger than you expected. If you set a height for 'outer' you will notice the margin will scale accordingly.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/
See this page i'm currently working on.
http://lacrosselaundry.com/lacrosseLaundry/contact.php
If i change the font-size for 6 from 14px to 18px it moves the form to the right. Why is that?
I want the form to be all the way over to the right like when the h6 font is 18px, except i want the h6 font to be 14 px. How do I fix this and why is it happening?
How about setting element sizes? Works for me in firebug.
#main {
width: 100%;
}
.clearLeft {
width: 300px;
}
As for reasons, .rightDiv moves (despite having align: right) because parent container (#main) width increase. I.e., you increase font size and container stretches to accomodate changes. Normally divs take up all available width, but having float: left overrides that.
You can try to set the width of #main to 100%, so the #main .rigthDiv element would truly float to the right.