|
CSS - Fixed Width Middle Column, Fluid Outers And 100% Height.
I need a combination of this:
http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. Similar TutorialsHi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates. I'm trying to convert a horrendous table layout into CSS. What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo. I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing. This is my current code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
<style type="text/css">
body {margin: 0px; padding: 0; background-color:#ffffff;}
#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }
</style>
</head>
<body>
<div id="header">
<div style="width: 425px; float: left;">
<img src="logo.jpg" width="220" height="66" alt="logo">
</div>
<div style="float: right;">
<p>This is annoying</p>
</div>
</div>
<div id="nav">
</div>
</body>
</html>
I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width. I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm But none have a fixed width center column (could they be modified for a fixed width center col?) Any suggestions? Hi, noob here, I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer. My layout idea is fairly basic. Fixed width-fluid height. One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin. What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution. I have considered using % values, but I don't know how to apply them to the skin's graphics properly. jbonham Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx Link he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks Hello all, I am implementing a 2 column fixed width template. The problem is that the smaller column does not stretch to match the height of the taller column. All of the online templates I have found remedy this problem by setting a 1 px high background image to span the width of the container div. My problem is that I would like to place an image at the top and bottom of the smaller column. How can I achieve this? Currently I have 2 fixed columns and a fluid center column. When I resize the window horizontally I want the columns to stay fixed until the center column will begin to overlap the side columns, at which point I'd like the side columns to begin fluidly squashing to accommodate. Is it possible to do this? Only thing I know of is max-width, but I'm not sure if that's correct as I've never used it before. Any help would be VERY appreciated guys, as I need to know this quite soon. -Luke Having coded using tables for the past 5 years, I'm coding my first site using pure CSS (hold back the laughter) ... I'm new to change. In any case ... I'm attempting to setup a homepage that has a fixed width and height. So far I've got a one-column header working fine. Beneath the one-column header I wish to have three columns with--dare I say it Web 2.0ish rounded corner cells--However the caveat is that these three cells need to all be a fixed height to go along with the page design. After two days of research, coffee, banging my head against my desk, I haven't been able to figure this one out. I am using an image at the top of each cell and an image at the bottom of each cell, but cannot get the cells to maintain a specific height. Any help would be appreciated: CSS: Code: /*<agl.folder "general">*/
body {
color: #000;
font 76%/1.5em "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.footer { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.user_links a:link { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:visited { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:hover { color: #8da7fb; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
a:link { color: #7f7f7f; text-decoration: none; }
a:visited { color: #7f7f7f; }
a:hover { color: #8da7fb; text-decoration: none; }
/*</agl.folder>*/
#frame {
width: 965px;
margin: 0 auto;
}
#header {
background-color: #fff;
max-width: 965px;
margin-top: 10px;
}
#content {
position: relative;
max-width: 965px;
height: 200px;
}
#footer {
background-color: #fff;
position: absolute;
top: 265px;
width: 965px;
}
/*<agl.folder "box">*/
#portfolio {
position: absolute;
left: 0px;
top: 0px;
width: 475px;
height: 200px;
}
.portbox {
background-color: #ffffff;
border: solid 1px #b6b6b6;
padding: 4px;
}
.portbox:before {
content: url(../images/homepage/portfolio.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.portbox:after{
content: url(../images/homepage/portfolio_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "methodologies">*/
#methodology { position: absolute; left: 482px; top: 0; width: 237px; height: 200px; }
.methbox { background-color: #ffffff; max-height: 200px; border: solid 1px #b6b6b6; padding: 4px; }
.methbox:before {
content: url(../images/homepage/methodology.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.methbox:after{ height: 200px; content: url(../images/homepage/meth_bottom.png); display: table-row; margin: -5px; }
/*</agl.folder>*/
/*<agl.folder "design">*/
#design {
position: absolute;
left: 726px;
top: 0px;
width: 235px;
height: 125px;
}
.designbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.designbox:before {
content: url(../images/homepage/design.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.designbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "solutions">*/
#solutions {
position: absolute;
left: 726px;
top: 135px;
width: 235px;
height: 125px;
}
.solutionsbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.solutionsbox:before {
content: url(../images/homepage/solutions.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.solutionsbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
h2 { font-size: 1.5em; font-weight: bold; }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Test CSS</title> <link href="css/home_layout.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="frame"> <div id="header"> <p align="right"><span class="user_links"><a href="(EmptyReference!)">Login</a> | <a href="(EmptyReference!)">Register</a> | <a href="(EmptyReference!)">Contact</a></span></p> <img src="images/tabs.jpg" alt="" height="43" width="965" border="0" vspace="3" livesrc="images/tabs.psd" /><img src="images/homepage/flash_header.jpg" alt="" height="275" width="965" border="0" vspace="5"/><br /> </div> <div id="content"> <div id="portfolio"> <div class="portbox"> <p align="center"><img src="images/homepage/screenshots.jpg" usemap="#screenshotsc1fd8d76" livesrc="images/homepage/screenshots.psd" alt="" height="137" width="426" / border="0"><map name="screenshotsc1fd8d76"><area shape="rect" coords="290,9,418,129" href="http://www.pilatesmovementnyc.com" alt="Fitness Center Pilates New York City" target="_blank" /><area shape="rect" coords="146,9,281,129" href="http://www.emmestyle.com" alt="Emme Super Model" target="_blank" /><area title="Healthy Living NYC" shape="rect" coords="3,11,130,132" href="http://www.healthylivingnyc.com" alt="Healty Lliving NYC" target="_blank" /></map></p> </div> </div> <div id="methodology"> <div class="methbox"> <p><img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step i</span>s<br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span></p> </div> </div> <div id="design"> <div class="designbox"> <p></p> </div> </div> <div id="solutions"> <div class="solutionsbox"> <p></p> </div> </div> <div id="footer"> <div class="footer"> <a href="(EmptyReference!)">Home</a> | <a href="(EmptyReference!)">Portfolio</a> | <a href="(EmptyReference!)">Web</a> | <a href="(EmptyReference!)">Marketing</a> | <a href="(EmptyReference!)">Advertising</a> | <a href="(EmptyReference!)">Identity</a> | <a href="(EmptyReference!)">Hosting</a> | <a href="(EmptyReference!)">Profile</a><br> <a href="(EmptyReference!)">Design</a> | <a href="(EmptyReference!)">Technology</a> | <a href="(EmptyReference!)">Business Solutions</a><br> <a href="(EmptyReference!)">Contact Us</a> | L<a href="(EmptyReference!)">ogin to Your Account</a><br> Copyright 2007 Website Development Enterprises, LLc </div> </div> </div> </div> </body> </html> I saw an idea that I liked a whole lot for displaying pictures and that kind of thing. I didn't want to really hank the guys code, but tried to make my own version of it. The problem I have is yet again with Internet Explorer doing really stupid things with the pics I drop in my div's. It keeps adding a padding to it and it's beginning to aggravate me. Here is the code I had: body { height: 100%; margin: 0; padding: 0; background: #4F6A84; text-align: center; } #super_container { position: absolute; top: 70px; left: 0; width: 100%; height: 438px; background: #424242; padding: 0; margin: 0 auto; text-align: center; } #super_container { height: 438px; } #sub_container { width:775px; voice-family: "\"}\""; voice-family: inherit; width: 765px; /*border-right: 1px solid #7D1E2C; border-left: 1px solid #7D1E2C;*/ height: 438px; background: transparent; margin: 0 auto; } #sub_container { width: 765px;} #right{ float: right; width: 150px; height: 438px; background: #c5c5c5; } #left { float: left; width: 400px; height: 438px; margin: 0px; padding: 0px; background: blue; overflow:visisble; background-image:url(new_test/test1.jpg); background-repeat:no-repeat; background-position:top left; } #left img { padding: 0px; margin: 0px; border: 5px solid #fff;} #center { margin-left: 401px; margin-right:151px; padding:0px 0px 0px 0px; border-top:1px solid green; } and the html <body> <div id="super_container"><!--start of super container--> <div id="sub_container"><!--start sub_container--> <div id="right"> </div> <div id="left"> </div> <div id="center"> test </div> </div><!--end sub_container--> </div><!---end of super conatiner--> </body> the problem becomes evident when I put an image in the htnl of the left element. It either looks likeit rises just above the top of the super-container, or it is flush with the top and leaves a margin underneath it. As always, any help or design/tips as to what I am doing wrong would be great. I am just experimenting with new things, trying to see what I can or cannot do. The idea would be to have a home page with picture and right column with info. Then on the sub-pages have nav and subnav on the middle and right columns and pics on the left. Just a dry run, trying to see where i am. Thanks for the help in advance! jon Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Hello I'm kinda new to css. (PHP programmer by day) and would like some help making something like this. stevenbarre dot com / sample.jpg I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars. The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over. I've done some googleing but haven't been able to find much on 100% height designs. Your help is much appreciated as well as links. |
|||||||