I have the following code:
http://jsfiddle.net/3fT2M/
Why isn't the two floated div background color isn't #666666 even though they are under the container div?
It works only if I set the container height which I would like to set to auto.
How can I make it work with .container { height: auto; } ?
Thanks,
http://jsfiddle.net/3fT2M/3/
Because the elemtns are floated inside the div.
This takes the element out of the normal flow of the document.
I've added the overflow: hidden; fix
Right now your div.container has no height. So you cannot see the background-color.
A simple fix is to add a <br /> before the last closing </div>.
See the fiddle: http://jsfiddle.net/3fT2M/2/
It also seems a simple .container div{background: inherit;} works.
Related
I'm having a problem with some text overflowing outside the parent's div. I tried with
element.style {
text-overflow: ellipsis;
overflow: hidden;
}
but to no avail.
Here is a JSFiddle with my code. Looks like the DD element goes outside the div. How can I force it inside without specifying a fixed width?
Your <dd> element has no width to overflow from.
See this updated demo.
UPDATE
Looks like display:table-cell was causing the issue in this case. Removing this style and setting display:flex; to the parent wrapper fixes the problem.
See this demo.
Flexbox is good for dynamic content and responsive design, whereas display:table-cell; seems to get stuck at a static width.
Is a more efficient way of doing this... for some reason I feel like this is an old way of doing this.
I have this page HERE (I'm re-creating a lynda.com webpage for a lesson) and the wrapper doesn't actually wrap around the section id="trailInfo".
In order to do that I would add br class="br_clear" /
Is there a more correct way of doing this? If I add clear=both to the section is doesn't work, I have to add it to the br.
Thanks!
Update your CSS with the overflow:hidden property inside your parent div
#wrapper {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 960px;
}
Explanation About Clearing floats
A common problem with float-based layouts is that the parent div's doesn't want to stretch up to accommodate the child floated div's. If you will add a border around the parent div you'll have to command the browsers somehow to stretch up the parent div all the way.
Now see the problem as you were facing: demo
its because you didn't clear the floats on that time.
So the Old Solution of this problem is clear:both;
if you will add extra div after the child floated elements like mentioned below code this will clear the floats:
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div style="clear:both;"></div>
</div>
New Solution is overflow:hidden;
if you will give overflow:hidden to your parent div this will automatically clear all the child floated elements inside the parent div.
see the new solution demo: tinkerbin.com/WKqFS7Lc
Hi now give to #wrapper overflow:hidden;
as like this
#wrapper{
overflow:hidden;
}
Demo
Add height: auto; to wrapper class. it works
you should use overflow:hidden; property on your wrapper.
#wrapper{
overflow:hidden;
height:auto;
}
I'll keep it brief. I'm trying to make a div element height 100%. All of the parent elements are set to 100% height, so that shouldn't be an issue. The original code is here: http://pastebin.com/THK13a2q
Here's a picture of the situation/problem. The dark grey background (id="content") is supposed to be 100% in height.
http://i.imgur.com/kOK9H.png
I think it has to do with the float on #rightfeed. You need to either set this to clear: both or add a div directly after it with clear: both applied.
If this doesn't work, please create a jsfiddle so we have something to play with.
Add to your css file
#content {
overflow: hidden;
}
as mikevoermans pointed out.
I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.
I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.
The problem is that this div doesn't extend to the bottom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.
Thanks
In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.
This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html
CSS:
div#test {
min-height:100%;
background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
background-repeat: no-repeat;
background-position: bottom;
}
div#wrapper {
height: 500px;
}
HTML:
<div id="wrapper">
<div id="test">Blalalalalala</div>
</div>
This way you're div (#test) will have the height of his parent (#wrapper).
http://jsfiddle.net/F95xN/6/
Try removing the min-height: 100%; and you'll see.
Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:
Add float: left to the container div, too.
Or, add something like <div style="clear: both;"></div> to the end of the container div.
Or, use a more flexible clearfix technique.
Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.
Thanks anyway.
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto