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.
Related
I encountered a problem about float style. Like the html code below:
...
<body>
<div style="float:left;width:25%;height:100px;background-color:red;"></div>
<div style="float:left;width:74%;height:100px;border:1px solid black;">
<div style="width:1000px;height:50px;background-color:yellow;"></div>
<div style="clear:both;"></div>
</div>
</body>
...
The effect is that the content in the 2th float div overflow.
Yellow div is in the float div, but its width exceeds its parent's.
I want to know how to set the css style to make the 2th float div can suite its child element's width/height automatically?
I know clear style can clear the float of divs listed by order, but how to handle it when it contains a larger child?
I don't want to use js to modify parent div's width.
You can achieve this by using min-height and min-width. This way the parent will always fit the children's height and width when they are bigger.
Check it out here.
By removing width and height property (or setting min-heigh and min-width property as Stephan mentioned you will made parent div to stretch over child.
http://jsfiddle.net/5ohtx2nc/1/
This however cause that if they are wider than screen second floated div will move to next row
http://jsfiddle.net/5ohtx2nc/
If you insist on having two divs one next to another you will need to do some tricks like in How to position two divs side by side where the second width is 100%?
http://jsfiddle.net/5ohtx2nc/3/
I have the following HTML code:
<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">
my_div will be populated with data later (via jQuery) but the thing is that the
<hr>
appears behind my_div but my_input is where it should be (that is, after my_div).
Does anyone know why?
EDIT: A bootstrap css class (span10) was causing this problem. After I removed that class, it worked.
Give your div a position: relative value
<div id="my_div" style="height:400px; position: relative;"></div>
For testing purposes only, i would give your CSS a declaration of !important just to rule out any javascript/ bootstrap override
<div id="my_div" style="height:400px !important; position: relative !important;"></div>
A bootstrap css class (span10) was causing this issue. After removing it from my_div, it worked.
Judging from the information you've provided, I think it might depend on the content you're placing into it. As you can see here, the <hr> is displaying below the div, as it should.
One case I can think of that might be causing this is if you're inserting content that is floated using CSS inside the div. In that case, the div will "shrink" to the height of the last in-flow (not floated) element it contains, which will make it shrink to a height of 0 if there are no non-floated elements inside it.
If that is your case, then you can work around that by adding the following CSS to your #my_div:
#my_div {
overflow: hidden;
}
There are also other workarounds for this kind of problem, but this one is the easiest to try out in order to check if that's the problem affecting you.
Another issue that could possibly be affecting you is that the height of the div is restricted to 400px. If the content of the div exceeds that height, it won't push the div's boundaries down, but instead it will overflow (quick demonstration). If that's the case, you can either set the div's height to auto, so that it will stretch along with the content, or you can make sure the content won't get past the div's height by tweaking it.
set the position of both to relative and see if they appear properly
It's because your div has fixed height of 400px. It may be overflowed by the content, but it can't move other blocks further than its specified height. Probably you need to set to it min-height: 400px instead of height: 400px.
A div without content is displayed as height=zero. Try inserting a
inside the div so that it is displayed as 400px in height initially.
i think jquery first remove your "my_div" then append to your container.
try this fix
<div id="yourContainer">
<div id="my_div" style="height:400px"></div>
<hr>
</div>
$(document).ready(function() {
$('#yourContainer').find('hr').remove();
$('#yourContainer').append('<hr />');
});
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I was hoping someone can take a look at my site and tell me what may be going on here. The problem I'm having is that the #bodyWrap div is not automatically stretching to the height of one of it's children, #contentWrap. #contentWrap stretches fine to fill all the content on that page, but this does not bubble up to the parent, #bodyWrap. Thanks in advance for any insight.
http://www.jacobsmits.com/placeholderRX/index.html
You must add a clearer div before your closing containers:
<div style="clear:both;"></div>
Floating items won't affect the height of the container...coz it is floating ;).
Working Live Example : http://jsfiddle.net/LBH5h/
Example :
<div id="content">
<!-- floating child --> <div style="float:left;"><!-- floating child content --></div>
<div style="clear:both;"></div>
</div>
If something usually won't auto adjust the height for me then I will troubleshoot with these steps.
Set the height to something ridiculous (1000px)
If that make a difference then check all floats
Add a clear:both; statement.
If it's still not working, add separate border colors to all of your divs. It should help you out to see whats setting the height properly and whats messing up the website.
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 .