I have a minor CSS issue. This is the website. As you can see, the div at the bottom overflows. How do I fix it? I suppose it's just a CSS rule I have to add/change. Thanks
Apply:
overflow:hidden;
to site_content_large_div
...or, if you want the div to grow with its contents, and for its container to work properly, then remove the height value applied to site_content_container_div, and apply a clearfix to the same, so that it's enclosed, floated elements will contribute to its calculated height.
Clearfix solves a common problem with float-based layouts, so it's best to create a separate, reusable class for this fix that you can apply to any element containing floats that need to be entirely visually contained.
This article provides all the necessary code: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
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 am attempting to set-up my homepage with three columns (each could be different heights depending upon the content) and for some reason the columns within my 'content' div do not respect it. This causes the columns to overflow onto the information below. I have tried to create the same layout using positioning since i understand its the better way of doing things; however i've had no luck.
I tried to use the 'overflow' element which does take the columns into consideration but it then puts a scroll bar on the content element.
Please see an example of my work here
Why does it does this? (edit) - Understood
How do i get it so the columns sit inside the
content element and respect the flow of the document? (edit) - resolved
Could you advise a better way of doing this maybe using positioning? Is the method I'm using the best way of positioning, or should i be using relative, static, etc?
Content will overflow its bounding box unless you use overflow: hidden (or similar) in some cases; see overflow and clipping in the CSS2 spec
Since you are floating your three columns, you need to use something like Clearfix so that content that comes after the columns' container will clear past them. (Alternatively, you could set clear: both on the <p> containing the footer content.)
Floating is the common way of approaching multiple columns, so you're headed in the right direction. Positioning almost certainly won't help you here.
Try adding overflow:hidden to your content div and removing the height restriction, like below:
#content
{
background-color:Blue;
width:800px;
overflow:hidden;
You are floating those columns, and you don't clear the float so what is happenings is that those 3 divs are "floating" above everything else, so the browser doesn't include them in the main html. You must clear the float with the CSS clear value.
See the jsFiddle here
Also check out this tutorial
I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
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.