Home/ Questions/Q 8635107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:53:33+00:00

I am trying to get a layout using Div containers, and I am not

  • 0

I am trying to get a layout using Div containers, and I am not making sense of why the Divs are acting the way they are. I expected them to line up one below another but that is not happening. Also the background colors are not filling in some of the Divs properly leading he to believe they are inheriting properties for other divs. Can someone tell we where I am going wrong in this simple example? Thank you.

HTML

<?php
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
require_once 'check_login.php';

?>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="style_wide.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container"> 

        <div id="toolbar_top"> </div> <!--end div toolbar-->


        <div id ="content"> 
            <div id = "map_canvas"><div> <!--end div map_canvas-->
            <div id="form_get_date">   <div> <!--end div form_get_date-->       
        </div> <!--end div content-->  


        <div id ="footer"> </div> <!--end div footer-->

    </div> <!--end div container-->
</body>
</html>

CSS

 html { height: 100%; }
body, html { min-height: 100%; height: 100%;margin : 0;
    padding : 0; }



body {
    width:100%;
    background : #F5F5FF; 
    }

#container {
    min-height: 100%;
    width : 100%;
    border-style: solid;
    border-width:1px;
    background  #FFFFCC;
    -moz-box-shadow: 10px 10px 5px #888888; /* shadow border */
    box-shadow: 10px 10px 5px #888888;
    }



#toolbar_top {
    border: solid 1px;
    height : 25px;
    background : red;
    }    



#content {
    min-height: 100%; /* need this */
    height: 100%;   /* and this, to get content div to stretch to bottom of page in Firefox */
    margin-bottom : 25px;background : #FFEBCC;
    color : #666;
    border: solid 1px;
    background:blue;
    }


#footer {
    clear:both;
    height:25px;
    position:absolute;
    bottom: 0;
    background : red;
    border: solid 1px;
    } 



#map_canvas {
    margin: 20;
    padding: 0;
    background:white;
    height: 400px;
    border: 1px solid;
    }

#form_get_date  {
    height:100px;
    border:solid;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Could it be that you want to close these DIVs

     <div id ="content"> 
    <div id = "map_canvas"><div> <!--end div map_canvas-->
    <div id="form_get_date">   <div> <!--end div form_get_date-->       
 </div> <!--end div content-->

    Such that they look as followed:

     <div id ="content"> 
        <div id = "map_canvas"></div> <!--end div map_canvas-->
        <div id="form_get_date">   </div> <!--end div form_get_date-->       
 </div> <!--end div content-->
    • 0