|
CSS - Problems Switching From Fixed To Fluid Layout
Hello,
I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again. I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related: 1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones. 2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal). 3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored. Here is a test html: http://www.bsuto.com/test.html and here is the css: http://www.bsuto.com/fluid.css Thanks! -Brian Similar TutorialsLink 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 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 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? 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. 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 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 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. Hi 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 used to using PHP includes and the like to make my pages. I like having header, footer, and navbar files so I can edit things once across a site. I just took some advice about ditching tables and using CSS for layout. It works fine if I just layout a single page but when I try touse includes everything is all over the place. Still a table-like headache. I'm sticking with it but I thought that CSS would allow me to put everything where i want it, maybe just beginner's problems but I try to put things exactly where I want them or use percentages, nothing works in IE & Netscape at the same time. Any advice on the best layout practices? Hi all, I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big. What happens in those cases is that the middle column tends to just write itself on top of the right column. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three columns</title>
<style type="text/css">
body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }
#base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
#main_block { margin: auto; text-align: left; }
#content { padding: 10px; padding-top: 2em; clear: both; }
#container_1, #container_2 { margin: 0; padding: 0; }
.three_column #middle_content_template { margin: 0 210px; }
#left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
#right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
#left_content, #middle_content_template, #right_content_template { padding: 10px; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="content">
<div id="container_1">
<div id="container_2" class="three_column">
<div class="clearfix">
<div id="left_content">
<p>Left box o' content.</p>
</div>
<div id="right_content_template">
<p>Right box o' content.</p>
</div>
<div id="middle_content_template">
<table>
<tr>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right. Additionally, I'd like the gray box to expand with it. Is this possible? Hey, I'm creating a 2-column fluid layout and find myself with a problem regarding word wrapping (at least I think that's the problem). For some reason I can't seem to get my content text to behave properly, namely the text gets hidden behind the right column as I decrease the browser-window. The columns are set to 70% (left column) and 30%(right column), with the combined width varying from 760px to 960px. The text I am having problems with is located in the left column, 150px from the far left side. I want this text to stretch from that position up until the right column begins. This have proven quite difficult. The main problem is, I suppose, that the necessery width of the div element that the text is placed within changes as the overall width change. I have tried experimented with specifying the width in percentages, however the correct value for that changes aswell.. So I'm stuck. Hope I made myself clear enough, kind of difficult to explain it to be honest. Does anyone have any idea how I can fix this (without abandoning my overall fluid layout)? Any pointers would be greatly appreciated. Cheers. This code produces what i want in IE. I'd like to know how to achieve the same result in firefox. The important parts of this layout is the fixed height for the footer and the testdiv completely filling the top td regardless of what else is in it. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<style>
body
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
width: 100%;
height: 100%;
background: gray;
}
.top
{
background: aqua;
}
.bottom
{
background: yellow;
height: 50px;
}
.testdiv
{
background: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</HEAD>
<BODY>
<table cellspacing=0 cellpadding=0>
<tr>
<td class='top'>
other stuff
<div class='testdiv'>test div</div>
other stuff
</td>
</tr>
<tr>
<td class='bottom'>
bottom bit
</td>
</td>
</table>
</BODY>
</HTML>
I have an issue with a 2 column CSS layout. Here is my code: Code:
<style>
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:70%;
background:yellow;
}
</style>
<div id="container1">
<div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
<div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem. </p>
<p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
</div>
Which produces this: Basically, I need a set up on the columns so that if there is no content in the left column (col1) col 2 will fill up the missing area. It doesn't work with the above code, specifically because of this part of the CSS Code: #col2 {
float:left;
width:70%;
background:yellow;
}
Which makes col2 move to the left, but retains the 70% width If i change the width to 100% or auto, then the col2 appears below col1 if I have content in col1. If I put no width or float in col2, the content in col2 wraps around col1: Help greatly appreciated I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides. How can you get the inside div to be of fluid width to the container div with the 10px either side. Thanks. Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. Hi, I hope someone can help. I have a blog with a fluid design (as best I can) layout. Images are floated in the main post, with width and height specified as a %. Quite often when I first load a page with an image, the image is very small and anchored to the top left of a box (defined by a border) that is the correct dimensions. When I resize the window containing the blog, the images fill out the defined box and everything is fine. Can anyone help me avoid the erratic behavior when I first open a blog page? I'm using IE7 and IE8 and see the same thing in both browsers. I'd post the URL for the blog so anyone interested in helping could see what I mean, but as a relatively new member here, I am not allowed to do so. Thx in advance for any help that can offered. Bill Whenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting? Or designers do go wider these days? Thank you I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions? http://midnighttweaker.50megs.com/test.htm |
|||||||