I have following code
<h1>Test</h1>
<p>Another test</p>
h1
{
border:2px solid red;
margin-bottom:30px;
}
p
{
border:2px solid red;
margin-top:20px;
}
Live fiddle here http://tinkerbin.com/dnhA713P
I want to have 50px space between h1 and p but its not getting the 50px space.
It's called collapsed margins. Here's a good article for mortals:
http://reference.sitepoint.com/css/collapsingmargins
And here's the specs for the rest of you:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.
If you use something like Chrome developer tools you can right mouse button on an element and get a visual of the box model for your elements. See these screenshots for reference. I think the answer will become clear once you see the visuals. The problem is collapsed margins.
I believe the reason you aren't getting your expected results is because since you already gave the h1 element a margin-bottom of 30px, the p element already has a margin above it equal to 30px, so telling it to have a margin-top of 20px does nothing. Try giving the p element a margin-top of 40px and watch the margin between them increase by 10px.
I don't see how that doesn't work... but you'd only get a 30px margin. The bigger margin takes precedence. You can also try wrapping them in <div> elements and assigning a 50px margin to one of the two.
http://jsfiddle.net/LuDvL/
<div id="header">
<h1>Test</h1>
</div>
<div id="content">
<p>Another test</p>
</div>
/* either one of these should work */
#header { margin-bottom: 50px; }
#content { margin-top: 50px; }
Related
I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0.
I am trying to make the site responsive and these are my percentage calculations:
wrap=100%
main-content=96.875%
main-content margins=1.5625%
divs=30.10752688%
div margins=1.61290323
CSS:
#page-wrap {
width:960px;
margin: 0 auto;
background: white;
}
#main-content {
width:96.875%;
margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
float:left;
width:30.10752688%;
min-height:160px;
margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
margin-right:0;
}
HTML
<div id="page-wrap">
<div id="main-content">
<div class="box">
content
</div>
<div class="box">
content
</div>
<div class="box right">
content
</div>
</div>
</div>
I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
The site can be viewed here for now: http://hl.kylmark.se
The problem I see is that there's a fixed 10px padding around all of the blue boxes. Since the padding is added on to an element's width, it throws off your percentage math.
Solution 1
You could just change the side padding on those boxes to a percent value like everything else:
.blue {
...
padding: 10px 1.0752688%;
}
With that approach you'd be collapsing the borders as you get smaller, which may not be desirable.
Solution 2
Maybe a better approach is to change the box-sizing property to calculate width from border to border rather than from content edge to content edge. That way you can have a 10px padding inside a flexible container whose width is figured correctly:
.box {
...
width: 32.258065%;
box-sizing: border-box;
}
One more thing
You may also want to watch out for is sub-pixel rounding. When your percentages calculate to something other than a whole pixel, the browser has to decide how to round it. If too many things are rounded up, the widths will get too big and cause content jumps like that in some browsers. You'll want to double-check that in your supported browsers. You can read a good explanation here.
Is it possible to remove the staircase effect in this example ? I have one div floating right and a few divs with fixed height and fixed width floating left. If the divs meet somewhere I get a rather strange staircase effect.
I know why this happens and I get it but im looking for a solution to avoid this. Please help me
<div class="container">
<div class="fright">just some contents floating right</div>
<div class="fleft">a div</div>
<div class="fleft">
this one is the problem.
Is it possible to have this div start at position B
</div>
<div class="fleft"><b>Position B</b></div>
<div class="fleft">a div</div>
</div>
and the css
div{
margin:10px;
padding:10px;
.container{
width:460px;
float:left;
}
.fright{
float:right;
border:1px solid green;
}
.fleft{
float:left;
height:180px;
width:180px;
border:1px solid orange;
}
http://jsfiddle.net/FusWd/1/
Instead of using floats, you may want to try using inline-block to do your layout.
I've updated your example here : http://jsfiddle.net/FusWd/4/
There are some caveats with this technique:
IE 6-7 doesn't support inline-block, you'll have to use the 'hasLayout' trick.
inline-block elements are influenced by whitespace in your markup, which may or may not break your layout. There are a couple of solutions to this.
You can remove the whitespace between the inline block elements in your markup
set the parent element's font-size and line-height to 0, and the letter-spacing and word-spacing properties to -1px, then reset font-size and line-height to their desired values, and reset letter-spacing and word-spacing properties to the normal values.
I'm having trouble making divs top position be relative to its preceding subling.
I have:
<style>
#container {position:absolute; top:0px; height:100%}
.question {position:relative;border: 1px double black;}
.question [scope=title] {position:relative; top:0px; color:black;font-size:28px; border-bottom: 1px double black;}
.question [scope=body] {position:relative; top:0px; color:black;font-size:18px; }
.question [scope=author] {position:relative;top:10px}
.question [scope=tags] {position:relative;top:0px}
</style>
and then
<div ID="container">
<div class="question">
<div scope="title">A</div>
<div scope="body">B</div>
<div scope="author">C</b></div>
<div scope="tags">D</div>
</div>
</div>
I expect author div to be 10px lower than normally would be, and for the following div to be relative to that. However, "tags" and "author" overlap.
So irritating, yet I bet there is a simple answer. Any help?
Try to set the margin-top on the author instead:
.question [scope=author] {position:relative;margin-top:10px}
Because your question element is computing to the height of the child elements.
So its height is matching the exact height of the children, but one of the children (C) you are pushing it down 10px so it is overlapping the one below it.
Just change author and it will work.
.question [scope=author] {position:relative;top:0px}
When one element has a position:relative offset, the element is rendered at an offset, but the other elements are placed in the layout flow as if the element did not have an offset. In other words, the offset happens outside of the layout flow. It's like an absolutely-positioned element that has an invisible placeholder occupying space for it in the layout.
Since you want the elements to respond to one another's offset, that suggests using a different mechanism for offsets, one that happens within the layout flow: padding or margins.
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}