Romy Li Posted January 17, 2006 Share Posted January 17, 2006 I am trying to create a page layout using DIV and CSS. It is a very basic layout containing 5 DIVs, as below :HeaderContainer with 2 DIVs, Menu and Content.FooterThe footer ended up disappeared under the container. How do I make the footer appears immediately after the container ?Thank you all.. Link to comment Share on other sites More sharing options...
HighCaliber Posted January 18, 2006 Share Posted January 18, 2006 In your container you should have your header at the top, your menu with the css attribute float:left, your content with the css attribute float:right, and your footer with the css attribute clear:both.you can download a zipped example below...http://europeanhistory.t35.com/Repcred2.zipChris Link to comment Share on other sites More sharing options...
Romy Li Posted January 19, 2006 Author Share Posted January 19, 2006 (edited) Hi ChrisThanks for the help, I have added the CSS as you mentioned and got the page to be in the shape I want. The layout tested in Mozille Firefox is more or less what I need. But when tested in IE6, the content Div go out to the right. I have enclosed my css and HTML. I hope you can help me again on this.Two problems :1) The Content go further than the specified 620 px.2) The border line of the container shows there is a second border on top of the content Div.Thank you very much. CSS body { color: red; margin: 0; padding:0; font-family: arial, helvetica, sans-serif; } /* Navigation div rules & children */ #header { color: red; border: 1; padding: 0; height: 100px; width: 750px; background-color: #fff; }#header p { margin: 0em 0% 0em 1%; font-size: 85% } .breadcrumb { margin-left:140px; text-color: red; }#container { border: 2; margin: 0; max-width: 750px; margin-top:0px; background-color: #fff; border-top: 1px solid #708090; border-bottom: 1px solid #708090; }#nav { border: 1; margin: 0; padding-top:10px; padding-left:20px; width: 136px; w\idth:140px; margin:0px; background-color: #fff; float:left; } #content { border: 0; margin:0; max-width: 620px; margin-top:0; border-left: 1px solid #708090; background-color: #fff; float: left; }#footer { color: #fff; background: #666; border: 1; border-top: 1px solid #fff; margin: 0; padding: 15px 7px 7px 7px; width: 750px; clear: both; }#footer { \width: 750px; } /* for IE5/Win */#footer { w\idth: 746px; } /* for good browsers */#footer p { color: #fff; font-size: 0.9em; text-align: center; } My testing html <html><head><title> Plan a Holiday-home page</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content="Romy Li" /><meta name="description" content="This is testing" /><meta name="keywords" content="all sorts" /><link rel="stylesheet" type="text/css" href="styLesheet.css" media="screen" /><style type="text/css" media="screen"></style></head><body><div id="header"><img src="images/banner2.jpg" width="760" height="75" alt="" /><p class="breadcrumb">Home > Contact</p></div><div id="container"> <div id="nav"><!-- #include file="menupage.htm" --> <div id="content"> <P> </P> <P>This is a lois content</P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> </div></div><div id="footer"> <p> my footer </p></div></body></html> [EDIT] added code box tag to encapsulate code - skemcin Edited January 20, 2006 by Skemcin Link to comment Share on other sites More sharing options...
HighCaliber Posted January 19, 2006 Share Posted January 19, 2006 (edited) CSS CODE html, body {color: red;font-family: arial, helvetica, sans-serif;height: 100%;margin: 0px;padding:0px;width: 100%;}#container {background-color: #fff;border: 1px solid black;height: 75px;margin: 0px;width: 760px;}#header {background: #fff url(images/banner2.jpg);border-bottom: 1 px solid black;color: red;height: 100px;padding: 0;text-align: left;width: 760px;}#header p {margin: 0px;font-size: 85%;} .breadcrumb {padding-left: 140px;text-align: left;text-color: red;width: 760px;}#nav {background-color: #fff;border: 0px;float: left;margin: 0px;padding-top: 10px;padding-left: 20px;text-align: left;width: 136px;} #content {background-color: #fff;border: 0px;border-left: 1px solid #708090;float: right;margin: 0px;padding: 5px;text-align: left;width: 620px;}#footer {background: #666;border-top: 1px solid black;clear: both;color: #fff;margin: 0px;padding: 15px 7px 7px 7px;text-align: center;width: 760px; }#footer p {color: #fff;font-size: 0.9em; } HTML CODE <html><head> <title> Plan a Holiday-home page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Romy Li" /> <meta name="description" content="This is testing" /> <meta name="keywords" content="all sorts" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <style type="text/css" media="screen"></style></head><body> <center> <div id="container"> <div id="header"> </div> <div class="breadcrumb"> Home > Contact </div> <div id="nav"> </div> <div id="content"> <P> </P> <P>This is a lois content</P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> </div> <div id="footer"> <p>my footer</p> </div> </div> </center></body></html> [EDIT] added code box tag to encapsulate code - skemcin Edited January 20, 2006 by Skemcin Link to comment Share on other sites More sharing options...
Romy Li Posted January 20, 2006 Author Share Posted January 20, 2006 Thank you for taking time to help me. I have tested out the new codes. The CSS works very good when I ran it using IE, thank you. However the layout was totally out when tested using firefox. Would you be able to have another look for me ?thanks again Link to comment Share on other sites More sharing options...
HighCaliber Posted January 20, 2006 Share Posted January 20, 2006 (edited) This should fix the major problems. Let me know if you need more help.CSS html, body {color: red;font-family: arial, helvetica, sans-serif;height: 100%;margin: 0px;padding:0px;width: 100%;}#container {background-color: #fff;border: 1px solid black;margin: 0px;width: 760px;}#header {background: #fff url(images/banner2.jpg);border-bottom: 1 px solid black;color: red;height: 100px;padding: 0;text-align: left;width: 760px;}#header p {margin: 0px;font-size: 85%;} .breadcrumb {border-bottom: 1px solid black;border-top: 1px solid black;padding-left: 140px;text-align: left;text-color: red;width: 620px !important;width: 760px;}#nav {background-color: #fff;border: 0px;float: left;margin: 0px;padding-left: 20px;text-align: left;width: 136px;} #content {background-color: #fff;border: 0px;border-left: 1px solid #708090;float: right;margin: 0px;padding: 0px 5px 0px 5px;text-align: left;width: 620px;}#footer {background: #666;border-top: 1px solid black;clear: both;color: #fff;margin: 0px;padding: 15px 7px 7px 7px;text-align: center;width: 746px !important; width: 760px; }#footer p {color: #fff;font-size: 0.9em; } [EDIT] added code box tag to encapsulate code - skemcin Edited January 20, 2006 by Skemcin Link to comment Share on other sites More sharing options...
Romy Li Posted January 20, 2006 Author Share Posted January 20, 2006 Thanks for your quick response. This time the css fixed most of the problem with Firefox. The only thing is that Firefox does not seems to treat Nav and Content as next to each other, but Nav being above Content. So if you put in some text in Nav you will see the Content being pushed down, looking really off. Any ideas ?? Thanks again. Link to comment Share on other sites More sharing options...
Skemcin Posted January 20, 2006 Share Posted January 20, 2006 please start to use the tags when posting in these forums:[ c o d e ]the code you want to share (short)[/ c o d e ][ c o d e b o x ]the code you want to share (long)[/ c o d e b o x ](Of course, remove the spaces)Thanks Link to comment Share on other sites More sharing options...
Romy Li Posted January 20, 2006 Author Share Posted January 20, 2006 Hi Chris,I have just found out that :If I run the HTML using Firefox from within Dreamweaver 6, I have the problem mentioned in my last post. When I just run the HTML using Firefox, I don't have the problem anymore. Both Firefox and IE are consistent. So I suppose the problem seems to be caused by Dreamweaver 6. Thank for very much for you help. Link to comment Share on other sites More sharing options...
HighCaliber Posted January 20, 2006 Share Posted January 20, 2006 No problem Romy Li, I am available anytime. 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