YuWebdesign




How to prevent div from falling below under another div on window resize

By yulia

Here is html code:


‹div class="parentContainer"›
  ‹div class="child1"›‹/div›
  ‹div class="child2"›‹/div›
‹/div› ‹!--close parentContainer--›

How does the float work?

First, let’s try to find out how does the float work.

Content flows down the right side of a left-floated box

Content flows down the left side of a right-floated box

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

Floats cause other floated elements and inline content to flow around the float, but other block boxes ignore the float.

In other words floats are taken out of the normal flow in relation to sibling block elements.

Solution

Here we define the parent or container div

float: left for the child1

float: none and overflow: hidden for the child2

Here is css code:


#parentContainer {
  position: relative;
  width: 100%;
  min-width: 100%;
}
#child1 {
  position: relative;
  float:left;
}
#child2 {
  float: none;
  overflow: hidden;
}

This solution can be found here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>