- I am faced with the challenge of creating a CSS layout that must adhere to specific minimum width and height requirements, yet expand to occupy 80% of the browser size.
- The main div I need to design should have rounded corners, utilizing images due to lack of CSS3 support. In addition to the corners, there are images running between them on the top, bottom, left, and right sides to create a drop shadow effect.
- My current approach involves using position:relative for the main div and position:absolute for the corners, which works well so far. However, I am encountering an issue when trying to make the middle images expand to fill the space between the corners; they end up extending past the boundaries of the div.
- While I have provided images and code below, I am open to alternative solutions. You can choose to use background colors in your solution instead of relying on the images I have provided.
This is my desired outcome:
The image set for the container can be found here:
https://i.sstatic.net/gCgFR.jpg
Here is a snippet of the code ...
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pageWrapper">
<div class="contentWrapper">
<span class="top-left"></span>
<span class="top-middle"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-middle"></span>
<span class="bottom-right"></span>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut viverra lectus vitae est ullamcorper a tempus est commodo.
Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum.
Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus.
Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque
vitae ullamcorper mauris venenatis.
</p>
</div>
</div>
</div>
</body>
CSS:
body {
background-color: #eeeee7;
}
.pageWrapper {
margin: 0px auto; /* centers the div horizontally */
min-width: 900px;
min-height: 430px;
height: 80%;
width: 80%;
background-color: red;
}
.contentWrapper {
position: relative; /* makes our corners absolute relative to our container not our browser window */
background-color: yellow;
height: 100%;
width: 100%;
padding-right: 34px;
padding-left: 34px;
padding-top: 155px;
}
.top-left,
.top-right {
position: absolute;
height: 155px;
width: 34px;
background-color: blue;
}
.bottom-left,
.bottom-right {
position: absolute;
height: 29px;
width: 34px;
}
.top-left {
top: 0;
left: 0;
background-image:url('images/cornerLeftTop.jpg');
}
.top-right {
top: 0;
right: 0;
background-image:url('images/cornerRightTop.jpg');
}
.bottom-left {
bottom: 0;
left: 0;
background-image:url('images/cornerBottomLeft.jpg');
}
.bottom-right {
bottom: 0;
right: 0;
background-image:url('images/cornerBottomRight.jpg');
}
.top-middle {
position: absolute;
top: 0;
left: 34px;
height: 155px;
width: 100%;
background-image:url('images/headerMiddle.jpg');
}
.bottom-middle {
position: absolute;
bottom: 0;
height: 29px;
width: 100%;
background-image:url('images/footerMiddle.jpg');
}
.middle-left {
}
.middle-right {
}