feck Posted December 7, 2006 Share Posted December 7, 2006 Hi people I've been messing around with creating a 3 colum layout using CSS and XHTML 1.1.I have wrap div that contains all of the rest of the content divs - Header, Left panel, Main, Right Panel and footer.2 problems actually, When i resize the browser window, the other divs resize accordingly, but the right panel div eventually moves out of its layout position and moves to the bottom of the page underneath the rest of the divs.Why is that, and why does it not occur with the main div for instance?Secondly in Mozilla, the footer which I've colored blue, shows itself beneath the header, but in IE7 it shows itself in the correct place beneath the left panel, main and right panel divs.The code at present has no textual content. only the divs with borders for my own interest for positioning these divs.Heres my code.XHTML: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb"><head><title> New Document </title><link rel="stylesheet" href="test.css" type="text/css"/></head><body><div id="wrap"><div id="header"></div><div id="navpanel"></div><div id="mainpanel"></div><div id="rightpanel"></div><div id="footer"></div></div></body></html> And the CSS: body{padding:16px;font-family:sans-serif;}#wrap{position:relative;border:2px solid black;width:100%;height:20em;}#header{border-bottom:2px solid black;width:100%;height:15%;}#navpanel{position:relative;float:left;border-bottom:2px solid black;border-right:2px solid black;width:20%;height:69%;}#mainpanel{position:relative;float:left;border:2px solid black;width:58%;height:69%;}#rightpanel{position:relative;float:left;border:2px solid black;width:19%;height:69%;}#footer{ background:blue; width:100%; height:15%;} The fact that some of the borders is missing is just where I've been hacking away at this Link to comment Share on other sites More sharing options...
real_illusions Posted December 7, 2006 Share Posted December 7, 2006 change the rightpanel to this.#rightpanel{position:relative;float:right;border:2px solid black;width:19%;height:69%;}then addclear:both;to the footer cssthat should solve your problems:) Link to comment Share on other sites More sharing options...
feck Posted December 7, 2006 Author Share Posted December 7, 2006 cheers real_illusionsi figured out the clear:both; by looking at the forum, and idiotically I've used it before in my own code to solve another footer problem.The right panel using either float: left or right, still doesnt solve the problem of the right panel moving when you manually resize the browser.Any other ideas?Thanks for responding and trying anyway. Link to comment Share on other sites More sharing options...
real_illusions Posted December 7, 2006 Share Posted December 7, 2006 try fixed widths for the left and right coloumnson this site http://www.menimotos.co.uk which i've designed and maintain, its a 3 coloumned layout which adjusts to the browser size. I dont use a wrapper on the site either to enclose everything.see if you can work something out from that:) 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