if I want to center content on my page, I can simply apply margin: 0 auto to it.
But that makes zero margins. How can I do if I want a minimum of, say, a couple ems of margin on the right and left.
thanks
Wrap the content in a div with margin.
You can set a width to the div which you are wrapping your content,and apply margin
You'll need to apply padding or margin to the parent element.
Related
I've this fiddle:
http://codepen.io/FezVrasta/pen/rOvpqL
<div class="r1"></div>
<div class="r2"><button>toggle</button></div>
<div class="r1 target"></div>
Where I have 3 divs inside a flexbox, each div has a margin bottom.
One of these divs can toggle (hide/show).
The problem is that the first div should not change its size theoretically, but in practice it does.
I think the problem is flex not taking in account margins.
Is there a solution using flex?
In this case the flexbox-layout is missing 10px when you're removing the bottom element (corresponding to the element's margin-bottom) .
You can overcome this adding flex-basis: 10px to .r3. that will compensate the missing 10px.
pen
I'm trying to create a layout where the header is fixed and the middle header div is aligned with the content div.
I got two issues:
There is a small offset that I can't fix.
The border-top of content-wrapper is not visible, why?
Fiddle: http://jsfiddle.net/sxZJ3/3/
Offset and no border-top:
The offset is due to you setting a padding: 5px on a width: 100%.
The reason you can't see the border-top is because of the border-bottom on the #header, which gives it an extra 1px of height, for a total of 61px. I would decrease the height to 59px, thereby yielding a total height of 60px.
Edit: Here's an updated fiddle
Easy fix is to replace width: 100%; with right:0; left: 0;: http://jsfiddle.net/sxZJ3/14/
if you remove the padding there is no issue, The main content is floating directly below the header. If you want to decrease this gap you could use padding or a variety of other options. Margin or even use the single border for both elements inline.
Could also try some positioning tricks. Div inside a container with a postition:relative and a fixed-height. Then on the div position:absolute and then margins and padding as necessary.
I would recommend a build more along these lines where you remove the body margin and allow the content-wrapper to be the sole margin pushing down the content. Also the padding within the header is causing the #menu to be offset by 5px within the header element. http://jsfiddle.net/sxZJ3/12/
The problem:
An element with display: inline-block; will have a different margin than an element with display: block; even if the margin is set to for instance margin-top: 30px; for both!
The margin-top will apply for the element with inline-block, but not precisely the same as for an element with block. There will be some pixels in difference. Why?
I think what you're referring to is the fact that margins of inline-block elements do not collapse, but on block elements they do collapse. The Box model page goes over this really well.
So what is a collapsing margin? Say you have an element with 10px margin on the bottom followed by an element with 5px margin on the top. The margin between the two will not be 15, but will collapse down to the largest of the two (10px).
Inline-blocks have by default a padding between them, (the size of a space, so 1em in width) if the element tags are not placed next to eachother without space:
<element></element><element></element>
Will be okay, but the following will not:
<element></element>
<element></element>
Blocks do not have this issue, that's why it seems different. It adds the default to the padding with the inline.
To overcome this, you can set the parent font-size to 0, or subtract the extra padding width from your desired width.
I dunno what's wrong with my css, but I can see only 50-60% of right border of left sidebar navigation. How to resize it to fit full container height?
Here is the image of sidebar navigation
And link http://www.smiths-heimann.az/?page=2
There is a huge padding-bottom in your container div which is 373px. I guess you have to recheck the design. A quick solution can be to reduce this padding to 354px.
You have a big mess with margins and paddings.
You should remove min-height on #wrap. Remove the negative margin-top on the #footer, the padding-bottom on the #container and just work on the padding-bottom of the .content
try setting you content div to "height:100%"
I need two consecutive div elements (with backgrounds) to be touching seamlessly, one below the other. However, this layout breaks when I put a child p element into the bottom div. The margins of the p element force a blank gap between both div elements. This is strange behavior, as I am expecting the margin of the p to stay within the content and background area of the div. It renders the same way on Firefox, Chrome and IE 8.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>
Here's what it looks like.
I could fix this by changing the margins to paddings for the p element, but then I would also have to do this with header elements, list elements, and any other element I want to use at the start of a div. That is not desirable.
Could someone enlighten me: what caveat of the box model am I missing? Is there an easy way to fix this, preferably by modifying the style of the div?
Add overflow: hidden or overflow: auto to the div
That is the expected behavior*. There are a few ways to get around it. If you float the divs, they will contain the margins of child elements and prevent margin collapsing. Another approach is to add a border or padding to the divs.
* The margins of the div and the p "combine to form a single margin", even though they are nested, because they have adjoining margins with no padding or border between them.
Solution 1
Add overflow: hidden/auto to the containing div to prevent the margin collapsing.
Solution 2
Add positive padding to the containing div and equal negative margin to the inner element
New Solution
Add padding of 0.01px to the containing div, this will prevent the margin collapsing but won't need any negative margin on the inner element.
Setting a positive padding, and a corresponding negative margin on the div element seems to fix the issue, though I know not why.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>