|
CSS - Mixing Fluid And Fixed
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. 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 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 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 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'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'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 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. 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 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! Hi guys, thanks for reading my thread (once again!) I have the code below that is my first ever "play" with CSS. The site is nothing serious yet but I am learning how to lay things out in a clear fashion and get used to CSS syntax. Code:
<HTML>
<TITLE>My Page</TITLE>
<HEAD>
<STYLE type="text/css">
body {background-color:#ffffff; font: 13px;}
div {border: 0px}
#main {margin: 0px auto; width=800px; position: absolute; left: 0%;}
#headerlogo {float: left; width: 200px; height: 55px; background-color: #7EC0EE; text-align: center;}
#headertext {float: left; width: 350px; height: 55px; background-color: #7EC0EE; text-align: left; font: 13px;}
#blankspace {float: left; width: 25px; height: 55px; background-color: #F5F5F5;}
#headerlogin {float: left; width: 225px; height: 55px; background-color: #7EC0EE;}
</STYLE>
</HEAD>
<BODY>
<div id="main">
<div id="headerlogo">
<h3>Site Logo</H3>
</div>
<div id="headertext">
Site text goes here. This sentence is a test to see how much text I can fit in this div before things start to go out of line. It appears that there can be quite a lot
</div>
<div id="blankspace">
</div>
<div id="headerlogin">
<table width="220" border="0"><FORM NAME="login" ACTION="dologin.asp">
<tr><td width="70" STYLE="font: 13px">Login:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="text" NAME="loginname" SIZE="4"></td><td width="70" rowspan="2"><INPUT STYLE="width: 70px; height: 20px; font: 12px;" TYPE="submit" NAME="submit" VALUE="Login"></td></tr>
<tr><td width="70" STYLE="font: 13px">Password:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="password" NAME="Password" SIZE="4"></td></tr>
</FORM>
</table>
</div>
</div>
</BODY>
</HTML>
The result can be seen by pasting the above into a notepad file. I have got a mock "login form" on the right panel, and the only way that I could get the fields to display how I wanted was to put them in a small table. I get the impression (from reading other peoples threads) that mixing tables with CSS is bad practice as it is mixing style and structure. Other posts have said that a small amount of tables is ok. Should the tables above be replaced with CSS? I tried to set it up myself, but all I could do was get the elements to line up under each other! : Login: <text field> Password: <pass field> <submit button> Also, is there any way to get the two text fields (as in, rows of the table) closer together when using CSS? In a table sense I guess it is the opposite of "cell top and bottom padding?" Thanks for any help anyone can offer me. Regards, Porky --edit 2 SORRY FOR CONFUSING YOU ALL ---- it works but everytime i click on the link i get extra space underneath the <tr with id>??? http://plumstead-mosque.co.uk/test/admin/outofStock.php here is the revised code: PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ //if echo "<tr style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; echo "<td>$ro2[1]</td><td>$ro2[2]</td><td>$ro2[3]</td></tr>"; } } echo "</table>"; ?> ----edit 2 is it possible to do this: <table> <div><tr><td></td></tr></table ?? because i have a link that hides/unhides this div. and it doesnt seem to be working? but if i remove all the tables then it works? basically i do know the solution (i think) currently i have id and style on div that says "display:none" and change it using JS. so i THINK i can move them to the tr? the only problem with this would be if there are more than one tr as i cant have two tr with same id.. --edit never mind got this to work, each tr will have "unique" id so there is no point using class. HOWEVER when i used class as var m = document.getElementByClass("name") it didnt work --- PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; echo "<div style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ echo "$ro2[1] $ro2[2] $ro2[3]"; } echo "</div>"; } echo "</table>"; How can I fix a Div a set distance below another Div without a set height? I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts - 1)The title text 2)A background photograph. I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality. Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top. Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work. I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this. Any suggestions? I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width. The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen. The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column. Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems. The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly Thanks, froth Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space. Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead. A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div. Almost makes me pine for the IE5.0 broken box model... p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements? I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class .. I'm trying to create a header bar with some navigational links. The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left. So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;} Anybody know a good way to do something like this? This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data. Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. I am useing bon rouge's 3 columns 100%: http://bonrouge.com/3c-hf-fluid.php In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom. Any idea how to fix this? |
|||||||