CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mo Martin
Mo Martin

Reputation: 207

Floated div overlapping unfloated div when below a certain width

I've struck a problem with a project i'm working on, the problem i'm facing is that a div that's been floated right will overlap all elements below (It seems to treat the div like it has no content) The div in question is an animated logo I've made in adobe edge animate.

HTML -- 

<header>

    <div class="tophead">   </div>

    <div class="bottomhead">

        <div class="lefthead col-sm-3">
            <img src="includes/lefthead.svg"></img>
        </div>
        <div class="snippet">
            <h2>All Sections</h2>
        </div>

        <div class="righthead col-sm-3">
            <div id="Stage" class="EDGE-31003756">
            </div>

            <!--<img src="includes/righthead.svg"></img>-->
        </div>

    </div>
    <div class="clear"></div>
</header>

CSS -

.lefthead {
padding-top:7px;
float:left !important;
}
.lefthead img {
max-height:77px;
min-height:60px;
}
.righthead {
padding-top:4px;
float:right !important;
}


.righthead.col-sm-3 {
max-height:70px;
min-height:60px;
}

.clear {
clear:both;
}

That's just a portion of the CSS as there is too much to paste.

A live version of the website can be found here - http://www.mosesmartin.co.uk/digitalguys/home.php

The website will work fine up until you lower the width below 500px. After that the 3 header divs will change so that 'lefthead'and the 'snippet' are 50% width and the 'righthead' is central below.

I've tried using 'clear:both' but that won't seem to work (I might be using it wrong but i don't think i am)

Any help is appreciated. Thank you

Upvotes: 1

Views: 90

Answers (3)

Matt Smith
Matt Smith

Reputation: 2158

If you just want to make <div class="righthead"> drop below the other divs without overlapping <nav>, change the float property of this media query ruleset from none to left:

before:

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

after:

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

Upvotes: 1

Kinburn101
Kinburn101

Reputation: 1162

You need to remove all height from your header in your media query for that specific size. set it to height:auto; instead

Upvotes: 1

hungerstar
hungerstar

Reputation: 21725

UPDATE

@Matt Smith has a solution that I overlooked and is a lot simpler than this, my bad.

Overall, you have more markup and styling than is needed which is making things a bit problematic for you. That said, the heart of the issue is with all the height declarations you have for header and .bottomhead. By constraining the height the content of the stacked elements are not able to stretch the height of the parent element.

@media (max-width: 500px) {
    header {
        height: 80px;
    }
}
@media (max-width: 767px) {
    header {
        height: 100px
    }
}
header {
    width: 100%;
    height: 100px;
}    
@media (max-width: 767px) {
    .bottomhead {
        height: 80px;
    }
}
.bottomhead {
    height: 80px;
}

Remove or comment out all the height declarations mentioned above. That should get you what you are looking for or at least close. You can also get rid of your .break and .clear DIVs.

You will likely have to make an adjustment here and there after words.

You can simplify things in a number of places removing un-needed markup, i.e. adding a border to .bottomhead and remove .tophead.

.bottomhead {
    border-top: 30px solid #20b148;
}

You might also find it useful to use the utility classes in Bootstrap like .pull-left and .pull-right to float elements left and right respectively.

Upvotes: 3

Related Questions