I just came across a question at the css section of phpfreaks and someone had a bit of trouble to create a header with a fluid middle and 2 fixed width images at each side of that. Besides that the whole header had to be 90% of the window size.
Now before you read any further, try to do this yourself (for fun ;) so again the requirements are:
- a header with a width of 90% centred in the middle of the screen
- in that header 2 images of 50px each side of an image with a width of 100%
Now the complication here is that the fluid image is not just a linear gradient which you can repeat-x, besides that by giving it a percentage it will kick off the images. So what to do...?
Lets think about this step by step.
We need some container that is 90% of the browser centred in the middle of the screen.
Well a div is perfect for being a container lets use that and give it an #id of #wrapper.
#wrapper{
width:90%; /* set a nice width */
margin:0 auto; /* center it */
}
To speed things a bit up I directly show all mark up required and I will explain why and how.
<body>
<div id="wrapper">
<div id="header">
<img src="images/left.png" alt="" />
<div id="middle">
<img src="images/bar.png" alt="" />
</div>
<img src="images/right.png" alt="" />
</div>
</div>
</body>
Since I like to make the mark-up as logical as possible. So lets include a wrapper around all the items that are part of the header. This also allows us the easily target them for future purposes.
Next thing is the positioning of the images. As said the outer images have a fixed width and the middle needs to stretch as far as possible. Now what I did is gave all images a property of float, in order for them to directly sit next to each other without any gaps. Also that will cause the div with id #middle to sit on that same line. Exactly what we want.
#header img{
float:left;
}
Next is that odd looking container with the id of #middle. Now this is the most important part of this article. Since the middle images is not just a linear gradient that i can repeat-x but an image that needs to stretch as far as possible but also has to keep some space at the left and right for those fixed images. So I wrapped that image in a div and gave it a margin left and right of 50px. The same width as the images with the fixed width.
And that does the trick. The middle container will stretch as far as needed but keeps the space for the outer images.
#middle{
margin:0 50px;
}
#middle img{
width:100%;
height:50px;
}
Curious how the working example looks like? Have a look here.
And that without weird positioning issues. Nice eh?
Hope you enjoyed the above! See you around!
Cssfreakie
P.s. note in the live example I am using images that are bigger plus I added a min-width to the wrapper.
