I know there are numerous threads on this subject but I couldn't get any of the suggestions I found to work for me. Whether that's due to novice status or because the code wasn't suitable, I don't know. But I'm now pulling my hair our after trying to get the grey background behind the h2 tag "Attachments" and the two lines that follow it to expand to full width, removing the white spaces that are currently to the left and right of this div.
http://bit.ly/1OVprsc
One approach is to use negative margins and padding to extend the background in both directions.
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
Your grey div is inside g-container div which have width that is not full one. So if you want to have that grey div full width u must change your structure into something like this:
<div class="g-container">
CONTENT
</div>
<div class="grey-div"></div>
<div class="g-container">
CONTENT
</div>
Or you can do it with position absolute but then none of the parent of the grey div shouldn`t be position relative so the grey div can be absolute relative to body.
Related
Basically I have a wrapping <div> mean to add a border around something. It has a padding of 19px. Inside that wrapping <div> I want to insert pretty much any kind of content. Currently, it has another <div> inside. The problem is that that internal <div> has a bottom margin of 20px, so there is a space of 39px between the end of the internal <div> and the border, which just looks awkward.
As far as the question is concerned the relevant code is just
<div style="padding: 19px;">
<div style="margin-bottom: 20px;"></div>
</div>
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Is there a way to make the bottom margin of the last item in the wrapper overlap with the padding? Alternatively, could I simply set the margin of the last child of the wrapper to 0px?
I actually figured out a way that seems to work for the alternative option (setting the bottom margin of the last child of the wrapper to 0px). Here's the relevant CSS where "callout-box" is the class of the wrapper.
.callout-box > :last-child {
margin-bottom: 0px;
}
I'm still curious if there's a way to actually cause the margin and padding to overlap without removing the margin. In this case, there is a 1px difference since the solution I just gave sets the spacing to 19px whereas overlapping the margin and padding would give 20px.
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Answer:
Very simple just add negative top margin. Look at the code below.
<div style="padding: 19px;">
<div style="margin-bottom: 20px; margin-top:-19px;">Inner Div</div>
</div>
What does a negative right margin do if two divs inside a parent div container are floated left ? I have heard of a common scenario where it can be used to solve a common problem where it is required for 2 floats to be side-by-side and to stretch to 100% width but where one float has a fixed pixel width. But apparently I am not getting the picture.
I am a newbie to CSS so it would be very helpful if someone can explain me from the scratch.
Please note that I am somehow aware of the effects of negative margins on the statically positioned elements just I am not clear of the question asked above.
Thanks in advance.
Twitter Bootstrap's column system is a nice example of this.
Take this code sample:
<div class="container">
<header class="header">Header goes here</header>
<div class="row">
<div class="col-sm-6"><div class="box">Image 1</div></div>
<div class="col-sm-6"><div class="box">Image 2</div></div>
</div>
</div>
With some styling, this gets you this:
Pink is the container padding and lightgreen is the column padding.
The columns are both 50% and have 15px padding. If you want them to be properly aligned with the header, you'll have to clear the padding-left of the left column, and the padding-right of the right column. This is not a very good workaround. What if you want to switch to smaller columns on a larger viewport?
Luckily, there is a better way. The div.row has a negative margin left and right of 15px, to compensate the 15px padding of the surrounding div.container. Because of the -15px margin, you can give your columns a padding of 15px and it appears as though they seamlessly align with the rest of your page. If we remove the negative margin, we get this:
Which is obviously not what we want. The usual approach would be to set the padding-left of the first column and the padding-right of the last column to 0 to align them. You could only imagine how complicated that would be with bigger grids that change depending on the viewport width.
JSFiddle available here.
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
I can't get my head around this but with the basic div containing an inner div if you remove the border style from either of the div element then the height of the overall box is affected?!?
Can someone explain this for me please?
<div style="background-color:red;border:1px solid black;">
<div style="margin:10px;background-color:blue;border:1px solid black;">
<p style="margin:30px;background-color:gray;border:1px solid black;">test</p>
</div>
</div>
Can you guys simulate this? does the height change if you remove the border styles?
Hope someone can shed some light on this
Many thanks!
The height (and width) is determined by the total of the css width, height (or width), margin and padding. It's call The CSS Box Model and W3Schools has a detailed explanation.
When you add a border it adds whatever number of pixels you specify to the outside of the element, so in that sense it will change the height of your element.
It will then affect the height of the div that it is in if it does not have a fixed height.
Hope this helps some.