CODEWITHSUNDEEP
htmlcss
Ferduun
Ferduun

Reputation: 137

CSS DIV weird behaviour

I want to create a div, called 'container' that contains all the other elements on the page.

If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.

It seems very weird to me, as the divs are all properly nested and otherwise behave well.

My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.

#upper {
float: left;
width: 100%;
height: 40%;
}

#lower {
float: left;
width: 100%;
height: 40%;
}

However I cannot quite pin down what is causing the issue. Any idea?

Here is my code: https://jsfiddle.net/xtaLfuLa/

Upvotes: 0

Views: 155

Answers (3)

Nandu Hulsure
Nandu Hulsure

Reputation: 133

Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it

 #results{
   margin-left:0; 
}

for smaller device and add it for larger device with media query..

Upvotes: 0

CntkCtn
CntkCtn

Reputation: 357

I would just add display:inline-block; into container class.

 #container {
    width: 80%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    background: rgb(163, 43, 43);
    border-radius: 20px;
    background: red;
    display:inline-block;
}

Upvotes: 2

Hacknightly
Hacknightly

Reputation: 5144

This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.

.clearfix {
  overflow: auto;
  zoom: 1;
}

https://jsfiddle.net/xtaLfuLa/3/

learn more here: http://learnlayout.com/clearfix.html

Upvotes: 1

Related Questions