Home/ Questions/Q 3788722
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T12:02:38+00:00

I’m working on this web-site: http://www.justaddsolutions.com/SampleSite/ The main area is meant to be 1024px

  • 0

I’m working on this web-site: http://www.justaddsolutions.com/SampleSite/

The main area is meant to be 1024px wide and always centered, which is achieved. However my client would like the yellow and red strips to extend to the respected edges (yellow to the left and red to the right) of the browser window when browser window is wider than 1024px.

I thought to solve it with CSS-based Liquid – Fixed – Liquid Layout, where center part is centered and side parts have equal liquid widths. But I can’t figure it out on my own and haven’t been able to find anywhere how to do it either.

I did find Liquid-Fixed-Liquid Layout at mathewjamestaylor liquid layouts website, but it breaks in IE8 when the browser’s window resized down to small size.

I then thought to achieve this with using a 3 column table in my header and style my td elements using background-image and repeat-x, but that seems not work well in Chrome and Safari.

Any help with this issue would be highly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    just tested this out,

    http://www.antiyes.com/test/4753259/

    look at the html, it looks kinda crappy right now because of the color profiles and stuff with the images, they would have to be cut better but this shows the basics of what to do.

    <html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>
    • 0