CODEWITHSUNDEEP
htmlcss
adabuyaman
adabuyaman

Reputation: 107

A div taking over another div space

The situation: So my website is divided into sections first div inside the body is just a main container then inside of that main container there's 3 div elements first is the header second is the body or content and third is the footer.

The problem: On some browsers or more specifically on any browser on Iphone mobiles or ios. my footer is showing on top of the middle of the body div (content section) but on any other android phone it's looking just fine or on the normal browser..

screenshots: (normal) on any android device:- screenshot on any android phone

(problem) on any IOS device:- screenshot on any ios phone

shared.css file that contains all the css for these pages:- https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css

link for the page that has the problem:- https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html

UPDATE: I'm only using the flex on #clouds_body so I can be able to fit the body right in-between the header and footer and I want the footer to stuck on the bottom even if the body wasn't taking enough space.

please help, thanks in advance.

Upvotes: 1

Views: 681

Answers (2)

Rickard Elimää
Rickard Elimää

Reputation: 7591

This is a Safari issue, and you can solve it by removing display: flex on #clouds_body. If you're not using flex-direction: row, it's kind of useless to use flex on it anyways.

I also removed the flex while watching the page on Mac Firefox, and nothing changed.

EDIT Based on the comment I got.

Change height: 100% to min-height: 100vh in #clouds_body.

This will, however, open up for other issues Safari have with your page, but that's beyond your original question.

Upvotes: 2

Shashidhar Reddy
Shashidhar Reddy

Reputation: 305

html code:

 <div id="container">
        <div id="header">header</div>
        <div id="body">body</div>
        <div id="footer">footer</div>
    </div>

css code:

#container{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}

This will work! This will arrange div's one below the other!

Upvotes: 0

Related Questions