Seeking assistance to code a layout using div layers that resembles the design in this sample:
The concept involves dividing the background into 4 distinct sections with content placed centrally. The upper part will feature a main banner image over pink and grey backgrounds, while the grey area will house dynamic JavaScript content.
Adjacent to the first grey segment, there will be right-aligned links and possibly a search bar within the same div. Planning to use tables for the small link boxes, but unsure where to position them.
The white zone will contain primary content alongside a sidebar, excluding the large empty white boxes which may shift to the sidebar later on. This section should expand according to the volume of content present.
The lower grey portion is reserved for additional text/links, necessitating vertical stretching based on content length.
Presently experimenting with layouts and seeking a foundational div structure to commence working with. Lack experience crafting stretch backgrounds with overlay content, hence requiring guidance on where to initiate.
Current progress:
body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
text-align: justify;
cursor: default;
}
#pinkbackground {
width: 100%;
height: 75px;
background:#ffbaba;
}
#whitebackground {
width: 100%;
height: 100%;
background:#ffffff;
}
#greybackground {
width: 100%;
height: 200px;
background:#e2e2e2;
}
#greybackground2 {
width: 100%;
height: 100%;
background:#e2e2e2;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<div id="pinkbackground">
</div>
<div id="greybackground">
<div id="content">
</div>
</div>
<div id="whitebackground">
<div id="content">
</div>
</div>
<div id="greybackground2">
<div id="content">
</div>
</div>
</body>
</html>
Your help is greatly appreciated!