I want to set the width of a header realtive to conatiner width with taking into account header's margin
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
}
header{
width: 100%;
border: 1px solid green;
height: 20px;
margin: 10px;
}
<div class="container">
<header></header>
</div>
but header element gets out from the border of container on a few pixels on the right side.
Also tried to add box-sizing: border-box; to header's style, nothing happened. Why?
Set width: calc(100% - 22px);for header. That's 100% minus twice the border (2 * 1px) minus twice the margin (2*10px), adding up to 22px.
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
}
header{
width: calc(100% - 22px);
border: 1px solid green;
height: 20px;
margin: 10px;
}
<div class="container">
<header></header>
</div>
I sugest instead of using margins on child div - use padding:10px on parent div. I've updated your code snippet.
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
padding:10px;
}
header{
width: 100%;
border: 1px solid green;
height: 20px;
}
<div class="container">
<header></header>
</div>
Related
I have 3 divs. One of them is functioning as a wrapper for the other two.
Let's call them div1 and div2. Div1 has a fixed width. The width of the wrapper is variable but never less then the width of div1.
Now, how do I make div2 always have the width (width of wrapper - width of div1)?
Here is what I got:
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
display: inline-block;
}
.div2 {
position: absolute;
width: 100%; /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
display: inline-block;
}
https://jsfiddle.net/kjhnhtny/10/
If I have not mistaken your question, you can use a pure css approach.
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
box-sizing: border-box;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
float: left;
box-sizing: border-box;
}
.div2 {
width: 100%; /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
box-sizing: border-box;
}
You're looking for two things:
To set float: left on .div2
The CSS calc() function, which can handle subtraction. Specifically, you're looking for width: calc(100% - (200px + (2px * 2) + (2px * 2))), which is 100% of the.wrapper, minus the width of .div1, along with both sides of both element's border width.
This can be seen in the following:
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
display: inline-block;
}
.div2 {
float: left;
width: calc(100% - (200px + (2px * 2) + (2px * 2))); /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
display: inline-block;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
Note that you could make use of CSS variables so that you only need to modify one property's value (with all elements being automatically adjusted), by setting a variable in :root and referencing it with var().
Having said that, CSS variables would probably be a bit overkill, but I'll show you how can use them in case you opt for this approach. Try adjusting the --border-width in the following, and you'll see that all elements update and resize appropriately :)
:root {
--width: 200px;
--border-width: 2px;
}
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: var(--border-width) solid #0000FF;
}
.div1 {
width: var(--width);
height: 200px; /*Fixed*/
border: var(--border-width) solid #FF0000;
display: inline-block;
}
.div2 {
float: left;
width: calc(100% - (var(--width) + (var(--border-width) * 2) + (var(--border-width) * 2))); /*Should be width of wrapper - width of div1*/
height: 200px;
border: var(--border-width) solid #00FF00;
display: inline-block;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
I use the above code to display a big div with two divs in it. For the first one I use position: absolute to place it on bottom left of the div.
How can I extend the height of the second gray one so that it's 5 pixels above the first, but without having to measure its exact height in pixel (like the pic below)? I can set height: 50px; for example but is there another way?
I would use a flexbox approach rather than absolute positioning (comments in css below)
div.div1 {
display: flex;
flex-direction:column;
/* add the above styles*/
border: 1px solid black;
min-height: 100px; /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/
width: 100px;
padding: 10px;
}
div.div2 {
flex-grow:1; /* make div grow to fill the space */
margin-bottom:5px; /* minus the amount of margin you wanted */
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
/* remove absolute positioning */
border: 1px solid red;
height: 20px;
width: 20px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
EDIT: I suggest that, if you can focus on the modern browser features, going the flexbox way as shown by Pete is definitely a cleaner approach than the ones I've shown bellow. That being said, here are the alternatives:
You can use calc to dynamically determine the height of div2:
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div1: padding top and bottom */
- 2px /* div1: border top and bottom */
- 20px /* div3: height */
- 2px /* div3: border top and bottom*/
- 5px /* desired separation*/
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
You can avoid including padding and border width in your calculations if you set the box-sizing for your divs to border-box (You might want to set this for all elements):
div {
box-sizing: border-box;
}
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div3: height */
- 5px /* desired separation */
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
There's this rather new, hip CSS property called 'flex' which you're now going to love because it does it exactly that without the need of positioning absolute etc. I did something similar yesterday where I had a vertical nav bar and I wanted one menu at the top and one at the bottom. In a responsive environment; using your approach of positioning absolute it would've resulted in a nasty mess of working out heights to stop the content from overlapping. Flex prevented this! Yeyyyyy
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your example you want to do something like this:
.div1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
.div2 {
align-self: flex-start;
flex-grow:1;
width:100%;
}
.div3 {
align-self: flex-end;
width:100%;
}
Now your div 3 will always be at the bottom. Although now .div3 will extend the entire width so within the div insert your content and BOOM done.
You can use calc on the heightsetting as in my snippet below. That setting is 100% minus (20 + 10 + 2) for the height, border and bottom of the lower DIV minus (5 + 2) for the distance and the border of the first DIV minus 10px for the padding of the parent, summing up to 49px .
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(100% - 49px);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
This might be a trivial question, but as you can see in this fiddle I have an inner and an outer div. The outer div has a percentage width on the body and the inner div should be exactly as wide as the outer div.
<div id="container">
<div id="content">Content</div>
</div>
The problem is, the inner div width does not adapt to the padding of the outer div. How do I get the inner div to do this?
The purpose of this is, that the div should be part of a form which consists of input fields and select boxes which also have a percentage width and a padding. The div should now be exactly as wide as the other form elements with padding.
#container {
width:80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
padding: 0 10px;
margin-left:-10px;
margin-right:-10px;
}
<div id="container">
<div id="content">Content</div>
</div>
I removed left and right padding.
Try this
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px 10px 0px; //changed this
}
Demo here
Just change the padding on the container. Also, block level elements will go to 100% width unless you specify otherwise.
http://codepen.io/anon/pen/wKwoPJ
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px;
}
#content {
border: 1px solid blue;
}
Remove the left and right padding from the parent and add it to the child element. Using box-sizing with border-box will ensure that the 1px border of the child will stay inside the parent element.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
width:80%;
border: 1px solid red;
padding: 10px 0;
}
#content {
border: 1px solid blue;
padding: 0 10px;
width: 100%;
}
<div id="container">
<div id="content">
Content
</div>
</div>
you can add this css to the #content -
width: calc(100% + 20px);
margin-left: -10px;
Full Code -
#container {
width: 80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
width: calc(100% + 20px);
margin-left: -10px;
box-sizing: border-box;
}
#othercontent {
margin-top: 10px;
border: 1px solid green;
}
<div id="container">
<div id="content">
I'm not following the padding
</div>
<div id="othercontent">
I'm following..
</div>
</div>