Solved

left and right fixed "frames" with css - fixed width page

Posted on 2006-10-24
7
212 Views
Last Modified: 2008-02-01
It's either been to long of a day or I'm just lacking a piece of knowledge. This is what I'm attempting (widths for demo purposes only):

wrapper div centered on page, 800px wide
left column - 150 px wide, background and contents do not scroll with the page
center column - 500 px wide, scrolls up and down
right column - 150px wide, background and contents do not scroll with the page

any help is greatly appreciated. You don't have to go into a ton of detail. It's my guess that I'm just not thinking.
0
Comment
Question by:austinstace
  • 3
  • 2
7 Comments
 
LVL 7

Expert Comment

by:Animasu
ID: 17794498
here you go! it works in FF ive not tried it in IE,

<html>
<head>
<style type="text/css">
#container{margin:0px auto;width:100%;}
div#left {position:fixed;left:10px;width: 150px;border-width:0px;background-color:red;color:black;}
div#right {position:fixed;left:600px;float: left;width: 150px;background-color:yellow;color:black;}
div#middle {position:absolute;left:110px;margin:0px;width:500px;background-color:green;color:black;overflow:auto;}


</style>

</head>
<body>
<div id="container">

<div id="left">Left 1</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>

</div>
</body>
</html>
0
 
LVL 7

Expert Comment

by:Animasu
ID: 17794519
...in addition to that last message, if you just generally spam a load of <BR />'s and random letters in the "Middle" it works! i have the CSS for the header and footer for this as well if you need it :)!

- Animasu
0
 
LVL 6

Author Comment

by:austinstace
ID: 17797132
Animasu,

Thank you for the suggestion but by using the fixed property, the columns break out of the normal flow of the document (to be expected) so they are no longer contained within the parent div (#container). I am also looking for a fixed width, 3 column layout centered in the page. Left and right columns do not scroll with the page but remain fixed.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 6

Author Comment

by:austinstace
ID: 17798489
A little sleep goes a long way. Yesterday must have been a long day. lol

This is how I accomplish what I'm attempting:

body {
      text-align: center;
      margin: 0px;
      padding: 0px;
}
#left {
      width: 50%;
      position: fixed;
      left: 0px;
      top: 0px;
}

#right {
      width: 50%;
      position: fixed;
      right: 0px;
      top: 0px;
}

#l_col {
      float: right;
      width: 150px;
      margin-right: 250px;
      background-color: #330099;
}
#r_col {
      float: left;
      width: 150px;
      margin-left: 250px;
      background-color: #330099;
}


#center {
      background-color: #00FF00;
      width: 500px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      border: 1px solid #000000;
}

The HTML has the l_col and r_col as children of their respective left and right divs
0
 
LVL 7

Expert Comment

by:Animasu
ID: 17801501
Oh i see what you did there! its a nice layout :) sorry i couldnt be of assistance!
0
 
LVL 1

Accepted Solution

by:
kodiakbear earned 0 total points
ID: 17828808
Closed, 250 points refunded.
kb
Experts Exchange Moderator
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now