Doing some css, so threw this quick fiddle together to show the issue I am having.
http://jsfiddle.net/ozzy/LJKsA/
The div block in center of the demo, is overlapping the container div.
Can you suggest a fix for this please, it always trips me up.
The center div can be larger as content is added, so outer div container needs to handle this also, and retain margins
You can add clear: both to the last element inside the containing div.
This is asked 10 times a day on StackOverflow. It's because you're using float ont he children of the container div. Just impleemnt overflow:hidden to it and it should work.
Search more about clearfix, also.
Related
I have a simple image gallery dynamically controlled by PHP to add and remove image thumbnails from a page. The problem I have is that I want the images to be aligned next to eachother until there is no room on that row and is forced to start another.
I have tried using float:left which worked but the containing body div with a height set to auto resized itself to not include the images. I then tried adding clear:both; to the images which fixed the body div issue but now has the images directly underneath eachother.
I've used float:left before in many cases but the containing div had a fixed height.
Does anyone have any idea on how I can fix this?
Thanks heaps :)
You have to add an empty div with "clear: both;" as the last element in the div containing the images.
If you add "clear: both;" to an image, that image will be placed on a new row because it wont allow floated elements on either side of it.
I was playing around with a floated div example, where I have a floated container and some floated child divs except one non-floated child
You can see the example on;
http://jsfiddle.net/emeRJ/7/
Now I wanted to understand the behavior or rendering for this non-floated child div...
2 questions:
Could you please explain how it renders currently and what difference does it make if I have it coded after all the child divs (i.e. it is the last child element)
Also will it have any impact on the non-floated child if I make the container as overflow:hidden ?
Answer 1
At the moment the un-floated div right at the top with the red border is displaying block so it spans the whole width of it's containing div. It is unaffected by the other divs in the containing element
If you move it to the last position in the containing div the other floated divs do affect the un-floated one so you need to clear: both; (which clears the float and places the un-floated div under the floated divs) with CSS, otherwise any text contained within the un-floated one will be floated to the left and then would proceed to wrap around the floated elements (it doesn't do this at the moment because the text isn't long enough). Unless that's what you are trying to achieve?
Answer 2
It shouldn't make any difference as nothing is actually overflowing the containing div which would be set to overflow: hidden;
Hope this helps
I'm trying to recreate a site-wide announcement similar to yours truly, stackoverflow.
http://jsfiddle.net/cuMDM/14/
I'm having two issues:
(1) I can't get the outer div element to appear below the announcement container.
(2) I want the announcement container element and the outer div element to be of the same width and both centered in the page.
Any help would be greatly appreciated.
The position:fixed on your announcement container means that both it and the outer container will have their top position at 0. You can add a margin or a position to the outer container to change this.
The announcment container already has a width of 100%. Are you opposed to putting width:100% on the outer container, and then centering any content for it that you want using some other technique?
I have a wrapper div with a min-height set. Position is relative and display is block. I have two column divs floated left and set to inherit min-height.
When I have lengthy content the background color of #wrapper never extends to match the content in the column divs.
Page is here: http://youngimaginations.dreamhosters.com/index.php
CSS is here: http://youngimaginations.dreamhosters.com/yi.css
Can someone point out the error of my ways?
overflow: auto will do the trick
or a <div style='clear: both'> after the floated elements.
The proper fix is called "clearfix".
Read about it here, you'll never look back.
I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem