Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Baltimore
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need with fixed width layout

    Edit: Whoops, meant to say "need HELP with fixed width layout"

    I'm definitely new at coding and this problem has been plaguing me for days and I decided I needed help. In learning how to layout pages, I created a test page and cannot figure out why the "middle" and "right" portions of the code are appearing at the bottom of the "left" portion.

    Here is the CSS

    Code:
    body {
    	background-color: rgb(59,61,69);
    	font-family: Georgia, Verdana, TimesNewRoman, Serif;
    	font-size: larger;
    	color: White;
    }
    
    div {
    	padding: 10px;
    }
    
    h1 {
    	font-family: 'Cantarell';
    	text-align: center;
    	font-size: 275%;
    	color: white;
    	background-color: rgb(95,135,168);	
    	border-style: solid;
    	border-color: black;
    	border-width: 3px;
    }
    
    .body {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .left {
    	float: left;
    	width: 100px;
            background-color: orange;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    	margin: 8px;
    	font-weight: bold;
    	color: white;
    	text-align: center;
    	clear: both;
    }
    
    
    .middle {
    	float: left;
    	width: 450px;
    	text-align: center;
    
    }
    
    .right {
    	float: left;
    	width: 100px;
    	font-weight: bold;
    }
    Here is the HTML:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    <title>Fixed width layout</title>
    <link rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
    
    <h1> test website, centered, fixed width layout </h1> <br/>
    
    <div class="body">
    
    	<div class="left">
    		<p> NAV BOX ONE</p>
    	</div>
    	
    	<div class="left">
    		<p> NAV BOX TWO</p>
    	</div>
    	<div class="left">
    		<p> NAV BOX THREE</p>
    	</div>
    
    	<div class="middle">
    	<P>
    		Can someone tell me why THIS section is not lining up at the top of the page with the yellow boxes?
    	</P>
    	</div>
    
    	<div class="right">
    	Place an advertisement here
    	</div>
    
    </div>
    </body>
    
    </html>
    Thanks in advance!
    Last edited by Ceepop; 09-06-2011 at 12:50 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Well, the answer to your question is that they are at the bottom because that's where they are in your code and there is no CSS that tells them to be elsewhere. Is it possible that you didn't post the .middle and .right part of the CSS?

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Baltimore
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hm. Missed the bottom few parts of my CSS code... sorry about that. I just re-edited. What CSS code could I use to move the .middle and .right parts up to the top of the page, right underneath the header?

    Thanks!

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Sorry for the delay in answering, work issues.

    The short answer is, because it's in a div. Doing this tells the renderer that it's a completely different thing and thus it unable to affect or be affected by content in another div. Yeah, that's a simplified description.

    The solution is to take the div tags around the text out, but that only fixes that one area. After a bit of playing, I think what you want is:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    <title>Fixed width layout</title>
    <style type="text/css">
    body {
    	background-color: rgb(59,61,69);
    	font-family: Georgia, Verdana, TimesNewRoman, Serif;
    	font-size: larger;
    	color: White;
    }
    
    div {
    	padding: 10px;
    }
    
    h1 {
    	font-family: 'Cantarell';
    	text-align: center;
    	font-size: 275%;
    	color: white;
    	background-color: rgb(95,135,168);	
    	border-style: solid;
    	border-color: black;
    	border-width: 3px;
    }
    
    .body {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .left {
    	width:130px;
    	float:left;
    }
    .box {
    	width: 90px;
        background-color: orange;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    	margin: 8px;
    	font-weight: bold;
    	color: white;
    	text-align: center;
    	clear: both;
    }
    
    .right {
    	float: right;
    	width: 100px;
    	font-weight: bold;
    }
    </style>
    </head>
    <body>
    
    <h1> test website, centered, fixed width layout </h1> <br/>
    
    <div class=body>
    <div class="left">
    	<div class="box">
    		<p> NAV BOX ONE</p>
    	</div>
    	
    	<div class="box">
    		<p> NAV BOX TWO</p>
    	</div>
    	<div class="box">
    		<p> NAV BOX THREE</p>
    	</div>
    </div>
    
    <div class="right">
    	Place an advertisement here
    </div>
    
    
    <p>Can someone tell me why THIS section is not lining up at the top of the page with the yellow boxes?
    </p>
    
    </div>
    
    </body>
    
    </html>
    What I did, if i remember it all, is place all the contents that you want to go to the left in a single div that is "float:left;" at a width of 130px (to give a nice margin) then put your placeholder for ads on as a "float:right;" before finally adding your middle text area without any div container. All of that went inside your body div so as to pull it's sides in while not also affecting the header..

    What this will do that you didn't say you were trying to do is push the text out to the full 800px after it has gone past the other elements. If you don't want that, just add your "middle" div back around it.

    I feel like I changed a few other things, but can't remember. Just compare what you have to what I posted here.

    Hope this helps.

    PS: after I posted I noticed that it was now off center. To fix that, increase the width of "right" to equal "left" (130px in what I did),
    Last edited by M.Jackson; 09-07-2011 at 10:11 PM. Reason: adding info

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Baltimore
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you so much, your suggestion works.

    I also figured out that I could solve the problem by reordering the content in the HTML portion.

    This code also solved the problem:

    Code:
    <body>
    
    <h1> test website, centered, fixed width layout </h1> <br/>
    
    <div class="body">
    
    	<div class="left">
    		<p> NAV BOX ONE</p>
    	</div>
    	
    	<div class="middle">
    	<P>
    		Why is THIS section is not lining up at the top of the page with the yellow boxes?
    	</P>
    	</div>
    
    	<div class="right">
    	Place an advertisement here
    	</div>
    
    	<div class="left">
    		<p> NAV BOX TWO</p>
    	</div>
    	<div class="left">
    		<p> NAV BOX THREE</p>
    	</div>
    
    </div>
    </body>
    I don't know if this code might go on to cause problems later however.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •