I am having an issue with collapsing divs in CSS! But not the normal issue. That would be too easy. I have a left floating div which contains two left floated divs. The first of the left floated divs contains text. If the second inner floated div's style is empty, everything works fine and the outer div encompasses the text and both inner divs. What i need to do is set the width of the second div to 10px. Instantly when I do this the outer div collapses to 10px, squishing the text div down. What!? I am able to find some reference to this behaviour existing, but nothing comprehensive about what it is really and now to work around it.
Do you mean to clear the floats? you can overflow:hidden; zoom:1 if the element containing the floats isn't already a float, or if it already isn't somehow clearing them.
It would help if you jsfiddle.net it.
Related
Having problems executing a complex layout with minimal usage of relative and absolute positioning.
Here's my layout:
All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the next row. How can I do that while preventing the elements in the 2nd row (the CTA elements) from scooting down below the lower margin of border img?
This is what happens if I set the height of border img
For clarification:
The dom is such that border img is between main_sidebar and CTA_top_container.
main_side_image
main_heading_container
main_sidebar
border_img
CTA_top_container
CTA_Button_relative
Closing thoughts:
I have some ideas, like floating right the border img as a div (or susy's last) and setting background-image as 60% width and positioned on the left of the div or nesting an absolute positioned img inside of a relative container to nudge it over to the left, but i am afraid of destroying the fluidity of the layout (it's inside of a susy fluid grid).
Any thoughts?
If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it.
You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not really the right grid for the job.
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/
I've a container div which has another div inside it. When I apply a margin to the inner div it appears to a margin-top to the container div (although it doesn't give a left margin)
http://belfastswimmingteacher.com/mockup.html
What's the craic?
You can either float the halfLeft div, or add padding-top to #content.
This is known as margin collapsing, and whilst may produce this unwanted behaviour, is in fact intended and correct.
Here's my simple mark-up:
<div style="width:200px">
<div style="width:50%;float:left;">
left side
</div>
<div style="margin-left:50%;width:50%;margin-top:10px;">
right side
</div>
</div>
The problem is that the margin-top:10px; on the right side also pushes down the left side.
What am I missing here? is this expected?
I would like to adjust the left and right sides top-margin properties independently
There are a few things you can do. What is happening is the right div's margin is affecting the position of the containing div for both, which is what pushes the left one down. I believe this is expected behavior. Any of these can work:
Set the containing div to float: left
Counter act the right div by either setting a -10px margin on the containing div or on the left div.
This is called margin collapsing and what actually happens is that because the outer div (the width:200px) is empty, it takes its children margin and uses it instead of the children.. so the container gets pushed down 10px and since the left/right divs are inside it they move as well..
"the expression collapsing margins
means that adjoining margins (no
non-empty content, padding or border
areas or clearance separate them) of
two or more boxes (which may be next
to one another or nested) combine to
form a single margin."
if you give it a border you will see it work as expected.. demo
Try floating the div wrapping the two columns, and also the right side div