CODEWITHSUNDEEP
csshtmlborder
Omax
Omax

Reputation: 29

Page border not displaying properly

I have just changed my container div tag to expand in height automatically, but now i have an issue with the border, it is only visible at the very top of the page and i need it to show all around, the code of the page is below:

<!doctype html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<div id="container" style="width:500px; border: 2px solid black; margin:auto">

<?php include "header.php"; ?>

<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left">
<p align="center"><b>Quiz 1</b></p>
// There is some more code in the page
</div>

<?php include "footer.php"; ?>

</div>
</body>
</html>

header.php:

<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center">
    <h1>Quiz Name</h1>
</div>

footer.php:

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left">
    Copyright/Disclaimer
</div>

Upvotes: 1

Views: 85

Answers (2)

MikeSmithDev
MikeSmithDev

Reputation: 15797

Your main issue is that everything is floating. You need to clear those floating elements for that container div to appear correctly. One way is to add a clearing div before the </div> for container: <div style="clear:both;"></div>

        <div style="clear:both;"></div>
    </div>
</body>
</html>

Upvotes: 2

display-name-is-missing
display-name-is-missing

Reputation: 4409

Try adding this code before </body>:

<div style="clear:both;"></div>

Upvotes: 1

Related Questions