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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems At Ordering Multiple Div's for the Layout

    First of all, it's nice to have found this forum, and I greet you all, second, let me state my problem:

    I am using MainContainer to hold all of the child divs.

    I am trying to align the divs like this:

    Code:
    	Left				Middle 					Right
    	Topleft				MiddleTopMargin				TopRight
    	LeftBorder			MiddleContent				RightBorder
    	BottomLeft			MiddleBottomMargin			BottomRight
    The problem is the div's are not aligned properly, they are cascading, How can I align them in columns?
    Also, where is my mistake?
    ( i tried float for Right and Left, but still nothing...

    Here is the link::Link






    If it is of any use, here are the codes:

    This is the HTML(just the body):
    Code:
    <body>
    <div id="MainContainer">
    
    <!--Left Side-->
    
      <div id="Left">
      
        <div id="Topleft">
    	</div>
    	
    	<div id="LeftBorder">
    	</div>
    	
    	<div id="BottomLeft">
    	</div>
    	
      </div><!--Middle-->
    
      <div id="Middle">
      
        <div id="MiddleTopMargin">
    	</div>
    	
    	<div id="MiddleContent">
    	</div>
    	
    	<div id="MiddleBottomMargin">
    	</div>
    	
      </div>
      
    <!--Right Side-->
    
       <div id="Right">
      
        <div id="TopRight">
    	</div>
    	
    	<div id="RightBorder">
    	</div>
    	
    	<div id="BottomRight">
    	</div>
    	
      </div>
      
    </div>
    </body>
    This is the external CSS:
    Code:
    body {
    	background-image:url(img/Background.gif);
    	background-repeat:repeat-x;
    	background-color:#000000;
    }
    
    #MainContainer {
    	margin: 0% auto;
    	width: 50em;
    	height: 70em;
    	vertical-align:top;
    }
    
    /*Left Side*/
    
    #Left {
    	width: 11px;
    	height: 100%;
        background-color:black;
    }
    #TopLeft {
    	background-image: url(img/TopLeft2.gif);
    	height: 11px;
    	width: 100%;
    	background-repeat: no-repeat;
    }
    #LeftBorder {
    	background-image: url(img/Vertical.gif);
    	height: 100%;
    	width: 100%;
    	background-repeat: repeat-y;
    }
    #BottomLeft {
    	background-image: url(img/BottomLeft.gif);
    	height: 11px;
    	width: 100%;
    	background-repeat: no-repeat;
    }
    
    /*Middle*/
    
    #Middle {
    	width:auto;
    	height:100%;
    	background-color:sienna;
    }
    
    /*Right*/
    
    #Right {
    	width:11px;
    	height:100%;
    	float:right;
    	background-color:black;
    	float:right;
    }
    #TopRight {
    	background-image:url(img/TOPright2.GIF);
    	background-repeat:no-repeat;
    	height:11px;
    	width:100%;
    }
    
    #RightBorder {
    	background-image:url(img/VerticalRight.gif);
    	background-repeat:repeat-y;
    	width:100%;
    	height:100%;
    }
    #BottomRight {
    	background-image:url(img/BottomRight.GIF);
    	background-repeat:no-repeat;
    	height:11px;
    	width:100%;
    }
    Last edited by Nemuro; 05-15-2007 at 11:28 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I see that you want a flexible layout with page width that is magnified under text-zoom. This prevents you from using a single vertically repeating background image for the whole page.

    Well, since you have a fixed-width-layout, you might as well give #Middle a fixed width too. Then float all three elements #Left, #Middle, #Right to the left. That should give approximately what you want.


  •  

    Posting Permissions

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