fiddle
HTML
<div id="a">
<table id="b">
<tr><td></td></tr>
</table>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#a {
background-color: yellow;
}
#b {
background-color:red;
height: 50px;
margin-left: 50px;
width: 100%;
}
I want the table #b to span from 50px from the left of its container (#a) all the way to the right edge of of #a.
By setting the width to 100% it goes off the page because it tries matching the width of #a. If I omit the width then the table is too small.
Setting the table to display:block and removing the width seems to give the desired behaviour. Is this reliable, or is there another method of achieving the same thing? I'd prefer not to resort to absolute positioning.
You can use the calc() function in CSS like this:
#b {
width: calc(100% - 50px);
/* your other stuff */
}
Most browsers support this nowadays. Have a look at caniuse.com to see, which browsers don't.
Example Fiddle
One way to do is is to use box-sizing: border-box
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
...
#a {
...
padding-left: 50px;
}
Unlike Sirko's answer, this is will work in IE8+ and not IE9+
Another way is to use conflicting absolute positioning
Related
What happen if a client wants a pixel perfect design, or in this case "percent perfect" like this example?
The full container is 100% height, so the sum of all divs and spaces results in 100% height.
The problem here is that i tried to add the spaces using margin-bottom in divs but realized that the percent margins don't represent the desired value inside the full container of 100% height.
The only solution that I know is using divs with % height instead of margins. But i want to do a cleaner html. Is there another alternative for this?
Additional info: I am using phonegap + ionic, is a mobile design.
First you will have to set the root element to height:100vh
Then use :nth-child to set the height and the margin of each divs
*{box-sizing: border-box}
:root{width: 100vw; height: 100vh; text-align: center}
body{padding: 0; margin:0}
div{
display: block;
background: #333;
width: 480px;
}
div:first-child, div:nth-child(2){
height: 15vh;
margin: 0 0 2.5vh 0
}
div:nth-child(3){
height: 20vh;
margin: 0 0 5vh 0
}
div:nth-child(4){
height: 30vh
}
<div></div>
<div></div>
<div></div>
<div></div>
I was recommended to post my fiddle as an answer. So here is the rundown: The issue that OP is running into is that margin is calculated as a percent of the width (See "<percentage>") when you use percents. That means that margin-bottom: 50% is 50% of the width of the container, not the height. One way around this is to use vh (viewport height) unit of measure. This is of course limited to a percent of the viewport and not a container, but as long as your design is essentially full screen with no scrolling, it's a possible solution (credit to the user #Tambo for coming up with it first).
Compatibility is also a concern (esspecially for IE): http://caniuse.com/#feat=viewport-units
Here is the important part of the solution
.small {
height: 15%;
margin-bottom:2.5vh;
}
.medium {
height: 20%;
margin-bottom:5vh;
}
.large {
height: 30%;
margin-bottom:10vh;
}
And the demo link: http://jsfiddle.net/c28h58cw/
Why don't you just use common sense arithmetic and absolute positioning? You won't need to check browser support that way.
div {
background-color: #888;
position: absolute;
left: 0;
width: 100%;
}
div:nth-child(1) {
top: 0;
height: 15%;
}
div:nth-child(2) {
top: 17.5%;
height: 15%;
}
div:nth-child(3) {
top: 35%;
height: 20%;
}
div:nth-child(4) {
top: 60%;
height: 30%;
}
<div></div>
<div></div>
<div></div>
<div></div>
Note that percentage top and bottom margins are relative to parent element's width, not height. Just another CSS WTF.
you could use
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
which makes the height and width include any padding/borders, have a look http://css-tricks.com/box-sizing/
I need your help.
It seems that my child divs, (the textarea and text) expand beyond the border:
This is the desired result:
Here is the HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
}
</style>
</head>
<body>
<div id="one">
<div id="two">text to the right</div>
<div id="three"><textarea id="field"></textarea>
</div>
</body>
</html>
Borders and padding on textarea are your problem.
Two choices
Both choices are related to textarea's CSS. And as you can see from code below I've also added relative positioning to #one, just to make sure it'll work in the context of your page, so textarea's width will actually be sized by this container.
set proper box-sizing so borders and padding will be included (JSFiddle):
#one {
width: 800px;
border: 1px solid red;
position: relative;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
box-sizing: border-box;
/* let's also add these for cross-browser safety */
border-width: 1px;
padding: 2px;
}
set width to less than 100% (JSFiddle)
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
/* (1px border + 2px padding) × 2 for left and right side */
width: calc(100% - 6px);
}
Borders and padding are added onto the width. since your width is 100% it adds the padding and border onto the field.
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding.
if you subtract the some space off of 'three' you can achieve this.
#three {
width:794px;
}
example
The following should work with most browsers as well.
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
Otherwise you can remove the border and padding from the textarea. There are quite a few ways to do this to be honest.
The reason for it to go beyond the border is that, it is taking border:2px;
You set width: 100% for the #field textarea. By default, a textarea also has non-zero values for border and padding. So after all your textarea is 800px wide(inherited from .three) + 4px border + 2px border = 806px all together (but it might differ slighty, depending on browser you use).
Modify CSS for #field to this
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
I also set margin: 0 just to be sure that some browsers won't have it set to non-zero value.
the classic box model adds up width with margin, padding and border.
In this case, set your textarea another way of calculating width, i.e. box-sizing to border-box (width is proper width, without margin, padding and border)
#field {
width: 100%;
-webkit-box-sizing:border-box;
}
(you might add desired perfixes, -moz, -ms, -o…)
I have two elements on my page placed together in columns like articles on a newspaper page. One element is an <aside> tag, with the main content inside of a <section> tag.
The container has a 15px margin to its left that causes it to spill over the right side of the viewport when its width is set to 100%. How can I prevent it from doing just that.
You can see the example from this fiddle: http://jsfiddle.net/spryno724/BHr5F/2/
Note: I know I can use the calc() function to accomplish this task, but given its current browser support, and my audience, I'm not ready to rely on this function.
Easiest Solution is to use padding-left on the .row container instead of margin-left on the content as can be seen in my updated jsfiddle:
div.row {
background-color: rgba(51, 51, 51, 0.9);
display: table-row;
padding-left: 15px;
}
http://jsfiddle.net/BHr5F/4/
Here there are a lot of good answers.
My favorite is:
.container {
width:90%;
margin: auto;
}
Add padding-left: 15px to body element and remove the margin from section.container:
body {
margin: 0;
padding-left: 15px;
}
section.container {
border: 1px solid black;
display: table;
max-width: 100%;
overflow: hidden;
table-layout: auto;
width: 100%;
}
JSFiddle Demo #1
You can also use box-sizing: border-box; to calculate width properties include the padding and border. and remove the horizontal scrollbar:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
JSFiddle Demo #2
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%
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}