Dihusky Posted November 19, 2006 Share Posted November 19, 2006 Hi,I have been trying to re-write my website to be 3 columns, navigation, content and advertisements but am having trouble in getting the right div to line up with the other 2. I have tried evrything I can think of but to no avail. I know I have problems with the dynamic menu but I have not tried to fix that yet.the CSS code: /*<![CDATA[*/body {margin:0; padding:0;text-align:center;}#container {width:970px;border:1px solid gray;line-height:150%;background: whitesmoke;}#header {width:100%;background: url(images/header2.gif) left no-repeat #fff;height:145px;margin:0;padding:0;}#footer {clear: both;background: silver;font:.6em tahoma, arial;text-align:center;color:#fff;width: 100%; }#sideleft{float:left;width:15%;margin:10px 2px 5px 2px;padding:5px;list-style-type: none;border: 1px solid silver;background-color: azure;}#content {float:centre;clear:none;margin-top: 10px;width:74%; padding: 5px;border: 1px solid darkgray;background-color: white;text-align:center;}#sideright{float:right;clear:none;margin: 10px 2px 50px 2px;width:20%;padding:10px;border: 1px solid silver;background-color: ivory;}#contentint {margin: 10px 10px 10px 20px; text-align:left;} #picture {float: right;width: 100px;}#header2 {background: #fff;margin:0;padding:10px;}/************************** start basic styles *******************/ #content ul li {font: .9em tahoma, serif; color:#000; line-height:1.1em;}p {font: 1em georgia,serif; color:#000; text-align:left;} #content2int h3, h4 {color:#000; } h1 {font:bold 22pt tahoma, arial, sans-serif;color:#154F01;margin:20px 0 0 0;padding:0;} h2 {font:bold 18pt tahoma, sans-serif; color:mediumblue;} h3 {font: bold 14pt tahoma,serif; line-height:15pt; color: #2DAF00;}h1.headline {display:none;}h1.title {color:#ccc;text-align:right;margin-right:20px;}.center {text-align:center;} and the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><?php require("global.php") ?><title><?php echo $title; ?>Home</title><link rel="stylesheet" href="layout1.css" type="text/css"><link rel="stylesheet" href="style.css" type="text/css"><?php echo $metaKeywords; ?></head><body><div id="container"> <!-- closed in minerfooter --><div id="header"></div><h1 class="headline"><?php echo $headline; ?></h1><div id="sideleft"> <?php require("menu.php"); ?> </div><!-- sideleft--> <div id="content"><div id="header2"><h2>Planning on buying a home?</h2><h3>This will be the biggest financial you will ever make.<br />Home Hunting Tips will show you and explain the steps to purchasing property.</h3></div> <!-- header2 --><p>Don't go into buying a home or any property for that matter without a professional. You can't simply rely on the agent to be your eyes, and ears and you certainly can't rely on an agent to guide your pockets!</p><p><i>These are only some of the tools that you'll have on your side:</i></p><br /><h3><i>Be happy with your home purchase and proud that you'll have the best property for your taste and budget!</i></h3></div> <!-- content --><div id="sideright"> <p> Advertisment </p></div><!-- sideright--> <div id="footer"><?php echo $footer; ?></div></div> <!-- container --> </body></html> I'd appreciate any help with this. You can see the problem <a href="www.homehuntingtips.com/test.php">here</a> ThanksDinahhttp://www.homehuntigntips.com Link to comment Share on other sites More sharing options...
Err Posted November 19, 2006 Share Posted November 19, 2006 Try this: Float all your 3 columns to the left, with the exception of your header and footer of course. You might want to use pixels (px) instead of percentages for your width's also; it can throw any css layout into constant chaos. Link to comment Share on other sites More sharing options...
Dihusky Posted November 19, 2006 Author Share Posted November 19, 2006 Thanks,It's now working fine.Dinah Link to comment Share on other sites More sharing options...
jlhaslip Posted November 20, 2006 Share Posted November 20, 2006 Doesn't work in my Browser set to 800 px wide. The right div drops down below the left menu div. Link to comment Share on other sites More sharing options...
Onkroes Posted November 24, 2006 Share Posted November 24, 2006 I'm trying to do something very similar, and I have a site where I use absolute positioning and pixel sizes, and it does work, but........ I want something that will work in all browsers and all screen sizes. So I figured I would go for simplicity, use percentage sizes and let the browser decide. Bad move apparently. Started playing as simply as possible....Stick this code (pasted below) into the Tryit editor and see what you get! It looks to me like you *should* get a header, 3 columns underneath it, side by side, and a footer. What you actually get is the right column sitting underneath the other two (but to the right because I told it to float there), but weirder, the footer then slots in to the left of it! (obviously tried it with the styles in a separate css file but stuck it inline for simplicity here). [oh, and it does the same thing in Firefox, and IE, as it does in the TryIt editor.I don't mean to hijack this thread for my own problem, but it strikes me it's essentially the exact same issue and I can't find (either by browsing the forum, following the tutorials, or endless playing with it) a solution, without absolutely positioning it.Floating the RB column right puts it on the right of the footer below the other columns, and floating it to the left (as I saw suggested) simply puts it on the left of the footer below the other columns. The colours are just so the divs are easily picked out. The header and footer are 10% each, leaving (I figure) 80% for the middle bit. Then the left and right columns (LB & RB) are 20% each, leaving (I figure) 60% for the middle column.Also tried putting the three 'column' divs inside a 'container' div width 100%, height 80%, to see if it would order itself properly within a div, but no such luck.Do percentages *really* not work in CSS as RahXephon said?<html><head><style type="text/css">#header{background-color: black;color: white;width: 100%;height: 10%;}#LB{background-color: yellow;color: red;width: 20%;height: 80%;float: left;}#MC{background-color: magenta;color: cyan;width: 60%;height: 80%;float: center;}#RB{background-color: blue;color: yellow;width: 20%;height: 80%;float: right;}#footer{background-color: black;color: white;width: 100%;height: 10%;}</style></head><body><div id="header">This is header text</div><div id="LB">This is text in the left border</div><div id="MC">this is text in the main content area</div><div id="RB">this is text in the right border area</div><div id="footer">this is footer text</div></body></html> Link to comment Share on other sites More sharing options...
Err Posted November 24, 2006 Share Posted November 24, 2006 I'm trying to do something very similar, and I have a site where I use absolute positioning and pixel sizes, and it does work, but........ I want something that will work in all browsers and all screen sizes. So I figured I would go for simplicity, use percentage sizes and let the browser decide. Bad move apparently. Started playing as simply as possible....I don't mean to hijack this thread for my own problem, but it strikes me it's essentially the exact same issue and I can't find (either by browsing the forum, following the tutorials, or endless playing with it) a solution, without absolutely positioning it.Also tried putting the three 'column' divs inside a 'container' div width 100%, height 80%, to see if it would order itself properly within a div, but no such luck.Do percentages *really* not work in CSS as RahXephon said? Whoa! I never said they will not work. It's just really very difficult to make one that works properly with percentages, across all browsers and resolutions, if not impossible. You always have the option of making a hybrid layout that uses both tables and divs. Consider my example:http://oneuse.awardspace.com/layout/ There I use a table and divs/css (no absolute positioning) to make this layout work on all resolutions. I only use 1 table in it just so it is structurally stable and won't drop anything because I'm using percentages here. You can test this layout on all browsers in different resolutions and in fact is it VERY stable. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 24, 2006 Share Posted November 24, 2006 Here is a link to a 3-columns percentage layout.http://www.jlhaslip.trap17.com/samples/3_col_flex.htmlNo content, but the html and css are there to look at. There is an overall wrapper which contains the floated left column and another wrapper div. The second wrapper div holds the centre and right columns.CSS file is the same name, but css extension.http://www.jlhaslip.trap17.com/samples/3_col_flex.css Link to comment Share on other sites More sharing options...
Onkroes Posted November 24, 2006 Share Posted November 24, 2006 Sorry RahXephon, I didn't mean to misquote you.Thanks for the help but I'm almost more confused than ever. The table thing I can handle and I think that's the safest cross-platform way of doing it.But the browsers seem to interpret percentages differently. So.. footer: I added "clear: both;" and that sorts that out, it sits on it's own beneath everything else taking up the whole page - great.If I put the rightmost two columns in a 'container' div, float the container right, then within that float the 'main' column left and the rightmost column right, then it works great in firefox, but is even more messed up in IE.So frustrating. jlhaslip's page works in IE (actually better than in firefox), so I tried copying elements of that solution into mine, (making sure I know what each element is supposed to do) until it's all but identical, and mine still doesn't work.Essentially (from jlhaslip's code), there are 3 containers:- pagewidth (which is just a blank div container) [contains header, wrapper, footer]- wrapper (which is the body between the header and footers) [contains twocols, leftcol]- twocols (which contains the middle and rightmost columns) [inside wrapper, alongside leftcol, contains maincol, rightcol]It *seems* obvious, it's not rocket science. And I assume it's the clearfix class that 'makes it work' despite the fact that all the other formatting options *should* make it work anyway. But.... even using 'clearfix' unadulterated, my code still won't work.Also, using jlhaslip's code, the height is only as high as the text that fills it (which is obviously not what I'm after). IE seems to ignore the height directive of a sub div (e.g. if I just put height 100% in the leftcol div, firefox makes it whole height, IE doesn't change). But also...I wanted to change the widths, so taking the code that does work and changing piece at a time to make it look more like my original, I get to the point where I want to change the column widths. jlhaslip has:leftcol: 15%, twocol: 85% = 100% (i.e. 100% of the pagewidth div)then maincol: 82%, rightcol: 18% = 100% (i.e. 100% of the twocol div)And that works, 3 columns side by side.When I change leftcol to 20% and twocol to 80% (i.e. still 100% of pagewidth div), we're still working,But when I change maincol to 75% and rightcol to 25% (i.e. still 100% of twocol), IE throws a wobbly and puts rightcol underneath and to the right of maincol (firefox continues unfazed).I'm so close to giving up - all I wanted was to follow the standard and have a sight that works cross-browser.I'm going to tables! Link to comment Share on other sites More sharing options...
jlhaslip Posted November 24, 2006 Share Posted November 24, 2006 Continue tweaking the width of the right column, making it slightly less each attempt and it will slip back up into the position you want it to be at. Make the background colour of the page the same as one of either the main or the right column to hide any gap that may appear.Fill the columns with content and research the 'faux columns' technique via googling.The Footer can be forced to the bottom of the page, also, using position:absolute, I think, haven't actually tried that yet. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now