I'am newbie in css, I want to discuss this question with you:
suppose that we have a div named A and its width = X px, and we have also 2 divs inside it, div B and div C.
div B:
width: 20%;
border: 1px;
div C:
width: 80%;
border: 1px;
so that, the summation of width of these 2 divs is as follow:
20% + 80% + 2(1px left border + 1px right border) => 100% (" width of div A) + 4px
the question is how to make the width of B and C equal to the width A regardless how its the width of their borders?
If you take a look at box model, the borders, paddings and margins are counted outside of the element, inorder to count the border inside, as you need, you have to use
box-sizing property with a value of border-box.
Demo 1 (Normal)
Demo 2 (Using box-sizing)
I assume either B or C have the float attribute.
In that case, skip the width-specification from the non-floating div. It will automagically fill up the rest of the width and fit snugly to the border of A.
Related
Let's say I've two sibling elements A and B. I want to set B's height fixed to (container's height - A's height). So, child elements of B won't increase the height of B.
I've tried using Height: 100%;, but it is taking container's height, not (container's height - A's height)
Sample angular app:
https://stackblitz.com/edit/angular-ivopeh
B's height should be fixed to (container's height - A's height) = (50px -30px) = 20px. So, if child element of B has height more then 20px, it should restrict its height to 20px and add scrollbar to it
I Would place this as a comment if I could.
To add a scrollbar to section b if the children are bigger than 20px you could overflow-y:scroll on section b(more documentation on overflow below). this way you only have to take care of the height which could be solved by adding flexbox or fixed values.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
if A has a fixed height then changing class B as follows should do it;
.B {
display: block;
height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
overflow-y: auto;
}
display: block; is required for any height value set on B to be effective.
overflow-y: auto is required to display scroll bars in case B's content overflows.
here is a working demo: https://stackblitz.com/edit/angular-mw3ugb
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
i am trying to make a list of divs of same size. I need to do it like this. I allign the divs with float left and let's say 5 divs have space in 1 line, the 6th div will go under it. Now what i need to do is the extra space that remains from this 5 divs on the line, should be divided equally between this 5 divs.
Let's say each div has 200px and the screen has 1100px width. The 5 divs now will have to have 25px between them. 200px + 25px + 200px + 25px + 200px + 25px + 200px + 25px + 200px.
Thank you in advance, Daniel.
You can float left an empty div with the width of 25px in your example or you use a percentage 25px for 1100 would be 2%
What I tried is % widths for your divs, and % widths for the margin. Since you want 5 divs per line the most you could do without space between or border is 20%. In the jsfiddle below, I used 17% width and 2% on the margin-left setting. You can customize a first div style to not pad left if need be.
.cell {
height:30%;
width:17%;
background:#ff0000;
border:1px solid black;
margin-bottom:2em;
float:left;
margin-left:2%;
}
http://jsfiddle.net/aKn4n/
You pretty much keep 5 divs on the first row as you shrink and grow the browser window.
I would personally try giving each div a margin like this:
div{
margin: 0px 12.5px;
}
This will hopefully evenly space all the divs.