I have two <div>s inside a parent <div>. Both the inner ones are styled with no padding, border or margin and as width:50%; display:inline-block;. The outer <div> also has no padding, etc. Firebug shows the outer <div> to be of 1240px width, and each inner one to be 620px. So why do they appear one below the other and not side-by-side? If i lower their width to 618px, it works. Huh?
display:inline-block is inconvenient in the way that it takes in consideration mark-up whitespace when drawing the elements, AFAIK. Try setting font-size:0 to the parent element if it doesn't have any other text, and set the desired font-size for the child elements.
P.S., first try eliminating white-space in the mark-up between the elements, to see if that corrects the issue.
It sounds like a fairly simple solution, if you have two blocks, A and B and they are the exact same size and you are looking at them straight on and they are lined up perfectly you will only see one block.
You're trying to make something display that doesn't fit inside of the container. You've already solved your problem size the container up or the contents down mildly to fit them together.
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I know this kind of question get asked everyday, but I don't seem to find a solution to this particular one...
So, the idea is pretty simple, I want to create a 3 column fixed width layout, with 100% width header and footer.
Everything seems to work aside from the footer.
Here is an example: http://jsfiddle.net/xMQLy/1/
So essentially the problem seems to be that, because the main body + lateral columns does not have a fixed height, the footer is not positioned at their bottom.
How would I go fixing that?
thanks
Using absolute or fixed for the position CSS property rips an element from the context of the parent. So, the parent width/height won't be affected by this child's size. The float properties also have this effect: It's not possible to effectively style using position:absolute/fixed or float.
I've thrown away these properties, and revised your code: #Fiddle: http://jsfiddle.net/xMQLy/5/
Some changes:
Thrown away useless CSS properties:
.wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
Grouped together common styles (.leftcol, .main, .rightcol).
Updated HTML source, added a <div class="wrapper-align"> wrapper around each div in the source, and removed whitespace between these wrappers [1]
[1]The .leftcol, .main, .rightcol elements can be positioned next to each other applying display:inline-block on each div. However, the default alignment for these elements is the bottom. Because the columns have to be located at the top, vertical-align:top has to be used. This CSS property can only be used at inline elements. To achieve this layout without messing with float or display:absolute/fixed, an inline wrapper around a display-block element is necessary.
The whitespaces have to be removed, to prevent creating a gap between the elements. To illustrate, compare these pages: No whitespace vs White space.
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
removed
So if you look at the tabs and look at hw2, you'll notice it has a little extra spacing that overlaps the spacing on the right. That's because wrapped the div in the <li>. You will notice the others not having it. I don't understand why is it making that extra little spacing after I wrap it.
Just for the record, this is for CSS spacing which has nothing to do with the JS.
Update: I found a ghetto work around!
Is it a space (or the absence of one)?
display: inline will respect whitespace.
You are putting a block level element (div) inside an inline element (li), which is invalid. Most browsers do a reasonable job of rendering this sort of thing, but the results are unpredictable.
I would suggest using divs for the higher level menu. You could use a container div for the menu and float divs within that for the individual tabs.
I ended up just changing the css for that page.
What does the following do:
<div style="clear:both"></div>
and how is it used?
It will 'clear' any floated elements that appear above it in the HTML source. If you have floated elements within a container element, the container will have a height of 0 and the floated elements will 'spill out'. Clearing them will allow the container to assume the correct height.
See here for a much better explanation.
It's made to avoid float elements to keep on floating after this div. In my opinion using this is a bad idea and it's better to use a clearfix on the wrapping div containing the floating elements.
In case you have float elements, a clear:both will not wrap around them, but will be displayed after them. In a way, this resets floating.
clear:both is also useful for giving an element the height of its floating children - without it the element would be smaller than its children, which is unattractive.
A less common use it to fix IE6 problems, where it doesn't display the page properly. Sometimes elements are rendered behind the background color, and clear:both can fix it.