1 reply [Last post]
jason.fonseca
jason.fonseca's picture
Offline
newbie
Sydney
Last seen: 12 years 17 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-09-21
Posts: 3
Points: 0

Hello,

I need to create the following layout:

As shown, when the client's browser size is 1024px width the right side bar should disappear.

I forgot to mention that i want the whole layout centered. Does anyone have any idea or techniques for me to go about doing this?

So far i've tried this:
Code:




Untitled Document

*
{
margin:0;
padding: 0;
}

.viewport
{
width: 1024px;
background: #eee;
margin: 0 auto;

}

.container
{
background: #666;
width: 660px;
float: left;

}
.sidebar
{

	/*margin: 0 0 0 660px;*/
	width: 363px;
	background:#8680ff;
	float: left;
}

.secondary-sidebar
{
position: relative;
top: 0px; 
left: -200px;
width: 200px;
clear: none;
background:#ffb0b0;
}







<div class="viewport">
<div class="secondary-sidebar">
secondary sidebar
</div>

  <div class="container">
    <p>Container  </p>
    <p> </p>
    <p> </p>
    <p>   </p>
  </div>
    	<div class="sidebar">
          <p>sidebar	</p>
          <p> </p>
          <p> </p>
          <p>       </p>
   	</div>
</div>



-or- link here: http://www.picknstick.com.au/diagram.html

As you can tell, there are several problems with that, the most obvious is that everything sits below the secondary sidebar. If anybody has a suggestion on how to fix this or any other problems you see it would be greatly appreciated...

as you can tell i'm not an expert at css, be kind

jason.fonseca
jason.fonseca's picture
Offline
newbie
Sydney
Last seen: 12 years 17 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-09-21
Posts: 3
Points: 0

Changes Made

Hi,

So i've tried now position:fixed and it seems to be doing what i want, but it doesn't work in IE7 or 6.

Have you guys got any ideas, see my amended file here:

http://www.picknstick.com.au/diagram%20r2.html

and code:




Untitled Document

*
{
margin:0;
padding: 0;
}

.viewport
{
width: 1024px;
background: #eee;
margin: 0 auto;

}

.container
{
background: #666;
width: 660px;
float: left;

}
.sidebar
{

	/*margin: 0 0 0 660px;*/
	width: 363px;
	background:#8680ff;
	float: left;
}

.secondary-sidebar
{
margin-left: -200px;
width: 200px;
clear: none;
background:#ffb0b0;
position:absolute;
}

.fixed
{
position:fixed;
background: inherit;
width: inherit;
}







<div class="viewport">
<div class="secondary-sidebar">
<div class="fixed">
  <p>secondary 
    sidebar</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>   </p>
</div>
</div>

  <div class="container">
    <p>Container  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p>   </p>
  </div>
    	<div class="sidebar">
        <div class="fixed">
  <p>    sidebar</p>
  <p> </p>
  <p> </p>
</div>
   	</div>
</div>




thanks guys