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.
Related
I'm working on a responsive layout that is basically boxed on the right side so the banner area runs flush with the sidebar/aside for desktop and wide views.
I can't seem to get it flush on the right side without making the width of the container fixed width, which means even a 1px difference in browser width makes it hang over or not span far enough.
Any suggestions? I have a jsfiddle with my markup here: http://jsfiddle.net/MtQ5J/
Here is the specific html markup:
<div class="hero-container">
<div class="hero wrapper clearfix">
<h2>
We thrive on solving other people’s problems in a collaborative setting.<br />
This means starting by understanding the client’s needs and goals.<br />
Listening to and understanding our clients is the key to how we work.
</h2>
</div>
</div>
It's H5BP, Normalize, and mobile first.
Example screenshot:
UPDATE
I added a container around the header, closed it before the hero area, then re-opened for the main content. I then floated a empty div next to the hero # 20% width, set the hero to 80% width.. this kind of works but I would have to MQ it to death to get it perfect.. still looking for a more "fluid" solution if possible!
jsfiddle updated
Add this rule to your CSS:
body{
margin:0;
padding:0;
}
JSFiddle Demo
JSFiddle Code
Is this any help to you?
http://jsfiddle.net/panchroma/5kpkc/
The only change I've made is that I've added
.main.wrapper{
float:right;
}
to the CSS so that the wrapper class floats to the right instead of being centred on the page.
You might need to refine this some more with media queries if you want more control over the layout of the aside as the viewport narrows
Good luck!
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 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'm trying to stop my sidebars from leaking into the footer area and I've tried lots of suggestions none of which seems to work.
I'd consider JavaScript if need be, but would rather use CSS. Here's an example page, I wondered if you check with a code inspector? The left & right nav are positioned absolutely for the background image to reach the end above the footer, and the contents are floated.
I want the contents to be able to expand without running into the footer.
I just can't figure out how and no-one else seems to either so this is a last try!
Looks like you need a sticky footer.
From what I can see, you only need the absolute positioning of the side-bars because of the shadow on the middle box.
For older browsers I would make #middle wider to include the background and give .inside the necessary margins to separate it from #middle (and to give it one of the backgrounds).
For modern browsers I would just use a box shadow.
Of course all in combination with just floats, no absolute positioning.
Like Jeroen said in his comment. Change <div id="left-container">, <div id="right-container"> and <div id="middle"> to float:left & position:relative. If you do this you will need to change the order to <div id="left-container"> then <div id="middle"> then <div id="right-container">. Some box model tweaking may be needed but your footer should now clear those elements. I almost forgot to mention to remove the margins on the divs.
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 .