Scalable Feature Area with Fixed Position Images

Question 1

With a bit of experimentation, I've managed to put together the following solution:

However, I'm almost certain that there will be unnecessary code in there. Can anyone have a look at this and let me know if there's a way of simplifying the code so it's a little tidier.

Also, you will notice that the middle div has inherited some padding that has resulted in it expanding beyond the height of the left and right divs. If anyone has a solution to this, can you let me know?

Thanks again,

Ross

<!DOCTYPE html>
<html>
<head>
<style>

#container {
   width: 100%;
}

#container > div {
    display: table-cell;
}

#left {
width: 200px;
height: 150px;
}

#middle {
width: 80%;
min-width: 400px;
max-width: 1000px;
height: auto;
color:white;
text-align:center;
display:table-cell;
vertical-align:middle;

/* fallback */
background-color: #1a82f7;

/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

#right {
width: 200px;
height: 150px;
}
</style>
</head>

<body>
<h1>Responsive Banner Test</h1>
<div id="container">

    <div id="left">
        <img src="http://placehold.it/200x150">
    </div>

    <div id="middle">
        <h3>Title goes in here</h3>
    </div>

    <div id="right">
        <img src="http://placehold.it/200x150">
    </div>

</div>

</body>
</html>

Question 2

I'm not sure, but do you mean something like:

|pic| content |pic|?

try it with a few divs like:

<div class="image-left">
 <div class="image-right">
  <div class="content">
   <!-- rarndom content -->
  </div>
 </div>
</div>

and in the css define the styles like (for example the pictures you want in the edges have a size of 50px width and height):

.image-left{
 background:url(/images/left-banner.png) no-repeat left;
 height:50px; 
 padding-left:50px;
 width:100%;
}
.image-right{
 background:url(/images/right-banner.png) no-repeat right;
 height:50px;
 padding-right:50px;
 width:100%;
}
.content{
 /* you can also define styles for padding or whatever you want */
 width:100%;
}

insert for height the height of your picture or of the banner and for the padding-left and padding-right values the width of your pictures you want. And of course set the right paths in the url ;) (i worked with a similar structure and it was working)

Question 3

Assuming that you have the same gradient background image the html will look like this:

<html>
    <style type="text/css">
        #banner{
            width:100%;
            height:400px;
            background: url('bg.gif') 0 0 repeat;
        }

        .text-content{
            width:960px;
            margin: 0 auto;
            /* background-color:#ffffff; */
        }
    </style>
    <body>
        <div id="banner">
            <div class="text-content">
               Lorem ipsum
             </div>
        </div>
    </body>
</html>