How to make an element width: 100% minus padding?
box-sizing: border-box
is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing
, etc.) are not needed in modern browsers.
Div width 100% minus fixed amount of pixels
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div
element is auto
, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
html, width 100% and padding
I would use another div to wrap the image and give:
padding:10px;
insteed of margin.
here is a demo: http://jsfiddle.net/f6jju2mn/
css - 100% + padding?
Block elements like <div>
s automatically assume a 100% width after padding. I.e. you should be able to achieve the desired effect simply by specifying a padding, leaving the width on auto
and making sure the element has display: block
(default for <div>
).
http://jsfiddle.net/EMYBm/8/
setting a margin or padding for a 100% height grid without scrollbars
Use padding
instead of margin
for selector .container.withMargin
:
.container.withMargin {
padding: 5px;
}
And add box-sizing: border-box
for the .container
selector.
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
box-sizing: border-box;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div class="container">
<div class="main">
<br />
<button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
How to make div 100% width when parent tag has padding?
You could apply a negative margin to the inside container to negate the padding
<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>
CSS: 100% width minus element on same line
2 ways do that:
- use
flexbox
, applyingdisplay:flex
in.bg
(.bg2
for demo) andflex:1
(or justflex-grow:1
) ininput
.bg { padding: 20px; background: #f5f5f5; margin-bottom: 25px;}.bg2 { display: flex; border: solid red}.bg2 input { flex: 1;}input { width: 100%; padding: 0.4em; height: 25px; border: 1px solid #ccc;}.button { height: 25px; padding: 0.4em; background: #ccc; border: 1px solid #ccc; text-decoration: none;}
<div class="bg bg2">
<input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>
</div>
<div class="bg">
<input type="text" placeholder="100% width" />
</div>
Related Topics
How to Disable Hover Effect for Active Link
How to Disable an Input Dynamically With Angular 7
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
How to Display Multiple Lines of Text in Svg
How to Use Two Ngfor in HTML Angular 4
How to Add HTML Line Break Within an Input Text Placeholder
Having Difficulty Understanding How to Remove Some Padding
How to Remove the Default Arrow Icon from a Dropdown List (Select Element)
How to Make Flex Box Work in Safari
How to Give Multiple Conditions in *Ngif Statement in Angular 6
Line Break in HTML Select Option
Angular 4 Img Src Is Not Found
Print Header/Footer on All Pages (Print Mode)
Changing the Symbols Shown in a HTML Password Field