I have 3 DIVs. 2 are inside the parent DIV. something like
<div id="parent">
<div id=1>......</div>
<div id=2 style="position:relative;left:0px;top:-300px;">....</div>
</div>
As you can see, there is an overlapping. The annoying thing is, the parent div has a huge white space at the bottom. The reason apparently is because the parent div doesn't minus the overlapping.
Would you please tell me what I should do?
To expand on Andrew's answer a bit for clarity. If you use position:relative the space that element would take up on the page is preserved(the white space you are seeing) and then the element is moved.
With position:absolute, the space that element would have taken up is not used("removed from the flow of the page"). However, with position:absolute, the element will not be bound inside the parent div anymore either unless declaring the parent div with a position:relative;top:0;left:0; CSS declaration.
So you would want something like this:
<div id="parent" style="position:relative;top:0;left:0;">
<div id=1>......</div>
<div id=2 style="position:absolute;left:0px;top:-300px;">....</div>
</div>
I hope that helps to clarify a little bit. Still not sure if this will give you the exact look you are going for, but from a CSS rule perspective it is correct.
Change position:relative to position:absolute to remove the element from the flow of the page .
Related
My question is highly related to this previously answered question. In fact, the solution provided by #harpo in the comments of the top-voted answer was a partial solution for me. However, I've found that it actually doesn't work on some of my elements, in particular, elements that have borders.
Some context: I'm using Bootstrap for my page, and I have a fixed navbar on top, then a page with a load of unstyled divs and .panel divs inside those divs. I have a top padding of 60px on my body which pushes everything down to account for the navbar. However, when I click on a link with an offset (e.g. example.com#div2-1), the top of the div is still covered by the navbar.
Using the solution provided in the linked answer above, I put 60px of negative padding (pulling the element up by 60px) on the :before element, then push it down by 60px again by setting the height to 60px. This creates no visual difference (intentional) but the calculated height of my div is now 60px taller, with the div starting 60px earlier than it should, and the real content starting 60px later. This essentially offsets the content for the navbar again.
However, I've found that on elements that have a border, such as my .panel elements, the border seems to contain everything, and the :before pseudo-element I have no longer has an effect on the calculated height of my div, which means it gets covered by the navbar again.
Here's my code on JSFiddle: http://jsfiddle.net/rszqtw80/3/
If you take a look at the rendered result in any dev tool, you can clearly see that the :before element is properly created and has the right height (60px) for both the outer and inner divs. But for the inner divs, the overall calculated height of the element ends up not including the :before element. Disabling the border with Chrome Dev Tools makes it work for me, so I've deduced that the border is the problem.
So my question: is it possible to get this CSS-based offset to work with my .panel elements without losing the border or having to go back to inserting a tags everywhere? Because quite honestly, without the border, the .panels look quite ugly, and nesting every div in an a tag is also quite ugly.
Thanks in advance!
EDIT: Rewrote my question slightly to hopefully clear up any misunderstandings about my intent. Sorry for my confusing explanation :(
FURTHER EDIT: I've added 3 screenshots that hopefully demonstrates this better than any words can ever hope to do. I would've added it here, but I can't add more than two links due to lack of "reputation".
You don't really need the :before tag for this.
jsfiddle.net/rszqtw80/8/
For your explaining: The > selector selects all direct children of your element.
.first-element > .all-direct-children
<a class="first-element">
<div class="all-direct-children">
<div id="notthisone" class="all-direct-children">
</div>
</div>
</a>
The element #notthisone won't be affected from your changes.
With nth-child, you can select whatever child you want. In your case, I used this to give the first anchor after Div 1, Div 2, etc. A margin-top of 0, So that it's not seperated from your heading(Div 1, Div 2), etc.
After consulting with multiple people, I simply gave up and nested my divs in another div like this.
<div class="container">
...
<div id="div2" class="anchor">
<div>
Div 2
</div>
<div id="div2-1" class="anchor" >
<div class="panel panel-default">
<div class="panel-heading">
Div 2-1
</div>
<div class="panel-body panel-collapse collapse in">
...
</div>
<div class="panel-footer">
...
</div>
</div>
...
</div>
</div>
...
</div>
I was hoping to avoid adding yet another layer into my DOM but it seems there's no helping it.
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
I was creating a simple html with a header and logo in it. Im doing this for email templates, so all are inline styles. I noticed there is a float break happening and the image is overflowing its parent.
<div style="width:640px;">
<!-- header -->
<div id="header" style="background-color:#005387; height:160px;">
<div id="logo-container" style="margin-top:20px;margin-left:20px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
</div>
</div>
</div>
http://jsfiddle.net/HMswX/8/
Any idea why this is happening? When I add overflow:hidden to #header elem, it works fine. But Im not floating any element within that, then why is there a float break?
EDIT:
Okey, I wasnt clear enough. Updated the code. I want to add margin-top to #logo-container. But when I do that, the whole div comes down, as if the #header is not within the normal flow(which I meant by float-break which usually happens when we float elements inside a parent).
Why not just specify a height on the img?
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">
http://jsfiddle.net/HMswX/2/
Otherwise just don't spcify a height on the header..
http://jsfiddle.net/HMswX/3/
Based on your update..
The margin isn't working because the div is collapsing.. look at this:
Float the div.. http://jsfiddle.net/HMswX/10/
Apply overflow:auto.. http://jsfiddle.net/HMswX/12/
If you want to read more on collapsing divs see this post same issue..
Why does this CSS margin-top style not work?
JoshC has the right answer to your question about why this is happening.
For the desired effect why not simply add a padding to the parent div?
<div id="header" style="background-color:#005387; padding:20px">
<div id="logo-container">
http://jsfiddle.net/HMswX/13/
This saves you from having to set an explicit height.
Because you have defined in the div with id=header:
height:60px;
Do you want the image to scale down or what is your desired result?
I'm not sure what you mean by float break, but you specify a height in your #header which is smaller than the height of your image. Thus, by default, it will overflow. If you specify overflow:hidden, it will be cut off. Why not remove the height and specify overflow:auto in your #header? Alternative reduce the size of your image by giving it a height, too.
See jsFiddle 1 and jsFiddle 2.
I have an element nested inside another element (i.e. parent element). The thing is, I want to make the child element wider than the parent element — as I am unable to find the PHP code that I need to move it outside its current parent element.
This is how the page looks (click image to enlarge):
THE PLOT: You are seeing two content blocks in the page — <div id="Content">...</div> is one block floating left and <div id="Panel">...</div> is another that's floating right.
See the blue color block of text? It's the title of a discussion thread in my forum and is represented by <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> in the code. As shown by the arrows, I would like to extend it to full width of the page using css width:980px;.
The thing is, <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> is a child element whose parent element is <div id="Content">...</div>. The width of the parent element is 700px, but I need the width of the child element to be 980px.
So what I am doing is this:
set the child element's width to 980px. (width:980px;)
Now the child element overflows the parent element and on top of the the right-floating block as well. (i.e., <div id="Panel">...</div>)
So, I gave the right-floating block some margin-top so that it comes out from hiding below the extended element.
The following image represents just that (click image to enlarge):
So my question is — is what I am doing okay or is it a bad thing to do? Is this cross-browser compatible? (i.e., does it appear the same across all browsers?)
Hope someone can clarify on this. Thanks.
Just move the heading outside of <div class="Content">.
<div class="Tabs HeadingTabs DiscussionTabs FirstPage">
</div>
<div class="Content">
...
</div>
Don't use JavaScript just for this, that would be a mistake.
I also feel compelled to mention that I don't think that heading should be full width anyway, it doesn't represent a heading for the sidepanel, it's for the thread (which is only in the left column).
I wouldn't. As a general rule of thumb, I keep the parents bigger than the children. See this and this. I'm sure you would see differences from browser to browser if you implement this using HTML and CSS.
Have you thought about using JavaScript to accomplish what you want to do?
I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.