This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 12 months ago.
Vertical margins by default do overlap, for instance if I have one div with bottom margin set to 20px, and the next div top margin to 30px the space between the two div`s should be 30px.
Im my case they do not overlap:
#contentwrap {
margin-bottom: 50px;
background: blue;
width: 100%;
height: 100px;
}
#pagenavi {
display: inline-block;
margin-top: 50px;
background: blue;
width: 100%;
height: 100px;
}
<div id = "contentwrap"></div>
<div id = "pagenavi"></div>
That's because margin collapse only happens vertically. By setting display: inline-block, this breaks the rule since the lower element may try to stick with the element above it.
More information can be found at here.
Could you show a specific problem so we can tackle it together?. Since styling display: inline-block; with width: 100% doesn't make any sense
#contentwrap {
margin-bottom: 50px;
background: blue;
width: 100%;
height: 100px;
}
#pagenavi {
margin-top: 50px;
background: blue;
width: 100%;
height: 100px;
}
<div id = "contentwrap"></div>
<div id = "pagenavi"></div>
Related
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I want to get my footer to look like this Image. 4 columns inside a triangle shape.
However for some reason it appears that all four columns get stacked on-top of each other, which I confirmed by slight changing the top margin. When I comment out the #right_triangle, I get 4 columns, as you would expect. I believe its the border on the actual triangle that's doing it, but I cant figure out a way to do it or get around it.
Below is the code I'm using.
#right_triangle {
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Reason:
The problem as you've correctly guessed is with the #right_triangle but it is not because of border. It is because of width: 0 on this element and width: 25% on child #footer_column* elements. May be you overlooked it (or maybe you haven't understood the concept fully) but a percentage width on a child element would use the parent's set width as reference for calculation. Thus the width of all child elements are nothing but 0px. Since they are floated, the second and subsequent elements are offset from their previous sibling only by the width of the previous element(s) and they don't have any margin on the right also. So, effectively they are all placed at 0px on the left (on top of each other).
Again since they are floated they stay in same line unless their width exceeds a line's width. Here the width is also not more than a line's width (which is the parent's width). If you set even width: 1px to any of the first three elements, you'd notice that the others get pushed to the next line.
Solution:
Given how you need the screen's width to be split evenly across the 4 columns (from the image) and without changing your overall approach, you could make use of any one of the following solutions:
Give all the #footer_column* elements, a width in viewport units instead of in percentages, set display: inline-block instead of float: left and add white-space:nowrap to the parent. All these will make them get displayed on the same line without changing your markup.
#right_triangle {
width: 0;
height: 0;
white-space: nowrap;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column2 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column3 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column4 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Make all the 4 footer column elements as children of footer element instead of #right_triangle. Since the footer is a block element, it gets 100% of the screen width by default and so it would be split evenly across the 4 children. Note that you would have to absolutely position the #right_triangle and use z-index: -1 on it for this method.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
z-index: -1;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle"></div>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
Notes:
Using CSS transform for achieving the triangle in this question would be tough because it will require specific angle calculations for both skew and rotate (depending on which one is used) and hence not recommended.
Gradients could have been a good option for this one but unfortunately they get rough and jagged edges at very high dimensions and hence not recommended.
If you can change your overall approach, I'd recommend using SVG to create the triangle. It is not that SVG offers any great advantage for this particular shape but it is generally more useful to start learning and using SVG for shapes as it helps in creating a lot of complex ones with ease. Below is a snippet using SVG.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 2000px;
height: 300px;
z-index: -1;
}
#right_triangle path {
fill: green;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<svg id="right_triangle" viewBox='0 0 2000 300'>
<path d='M0,0 2000,300 0,300z' />
</svg>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
I know there are several similar questions answered here, but I can not seem to get this working.
I have two parent divs - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent divs to expand their height based on the image's height.
I have this working for the div with the black background, but I can't get the parent div with the border to expand it's size:
Here is the fiddle: http://jsfiddle.net/vpdj4kst/
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
position: absolute;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="image.png" />
</div>
</div>
This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements.
Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Remove position: absolute; from .builder_img and the parent containers will react to its height.
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />
</div>
</div>
I have two divs here: http://jsfiddle.net/TXSfN/
CSS CODES:
#div1{
background-color: red;
display: inline-block;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 263px;
float: right;
}
I'm trying to set the two divs in the same line also after zoom-in/zoom-out in browser(CTRL +/CTRL -).
The problem isn't with setting the two divs in the same line, it's with the zoom-in/out, when I zoom-in/out the div with the long content get's longer and longer with the height and the one with the short content stay as it is.
Is there a way to set the two divs in the same row for every action(zoom-in/out).
I have updated your Fiddle: http://jsfiddle.net/TXSfN/2/
Set a max-height to the 2 divs, and overflow-y: auto the first div to keep the height the same and not have the content force it to become larger.
CSS
#div1{
background-color: red;
display: inline-block;
height: 250px;
overflow-y: auto;
max-height: 250px;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 250px;
max-height: 250px;
float: right;
}
This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 9 years ago.
I have a div with a width of 970px. (That is, of course, excluding borders, margins and padding). I am placing two divs inside this, side-by-side. Here's their CSS:
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }
Now, this works fine when the total width of the internal divs is 966px or less. When I get larger than that, however, the second div sits beneath the first. Why is this so?
As far as I know, I should be able to have a total width of 970px before I hit problems?
I bet you have new line between these two divs in HTML, and that's the reason.
For following CSS:
#main { width: 970px; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }
There is a difference between following 2 HTML markups:
<div id="main">
<div id="content"></div><div id="sidebar"></div>
</div>
and
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Check this example: http://jsfiddle.net/vnguQ/ and notice white line between elements in second part.
There may be whitespace between both divs and inline block apply styles for that whitespace.Take a look at these links
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
display: inline-block extra margin
How to remove the space between inline-block elements?
This problem happens when the main div having display property "block"(default one).
Add a property for the main div as dispaly:inline, it will automatically adjust the width for the inner divs. Change the css for main div.
#main { width: 970px; display:inline; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }