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

Thread: DIV layout

  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV layout

    This seems like it should be really simple to solve, but I can't find the answer anywhere.

    I'm trying to get the two divs in the middle to sit side by side. I've managed to do it with absolute positioning, and/or float, when the whole set is left aligned... but these attributes end up putting the divs in the wrong place when I try to center the whole set within a container div.

    Here's the code so far:

    Code:
    <html>
    	<head>
    		<title></title>
    <style type="text/css">
    .cont	{	
    		}
    .head	{	background-color: purple;
    			max-width: 1000px;
    		}
    
    .left	{	position: static;
    			width: 200px;
    			background-color: red;
    		}
    
    .main	{	position: static;
    			max-width: 790px;
    			background-color: blue;
    		}
    
    .foot	{	position: relative;
    			max-width: 1000px;
    			background-color: yellow;
    		}
    </style>
    	</head>
    	<body>
    <div class="cont" align="center">
    <div class="head">Stuff at top</div>
    <div class="left">Stuff at left</div>
    <div class="main">Stuff at right</div>
    <div class="foot">Stuff at bottom</div>
    </div>
    	</body>
    </html>
    Last edited by cactuscake; 02-26-2009 at 10:20 PM. Reason: resolved

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Edit Page</title>
    <style type="text/css">
    .cont	{	width:1000px;
    		}
    .head	{	background-color: purple;
    			max-width: 1000px;
    		}
    
    .left	{	float:left;
    			width: 200px;
    			background-color: red;
    		}
    
    .main	{	float:right;
    			max-width: 790px;
    			background-color: blue;
    		}
    
    .foot	{	height:200px;
    			max-width: 1000px;
    			background-color: yellow;
    		}
    </style>
    	</head>
    	<body>
    <div class="cont" align="center">
    <div class="head">Stuff at top</div>
    <div class="left">Stuff at left</div>
    <div class="main">Stuff at right</div>
    <div class="foot">Stuff at bottom</div>
    </div>
    	</body>
    </html>
    try that!

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, that seems to make it ignore the container div center align. I want the whole set of divs to sit in the center of the page, not the left.

    Like this page, but with div widths that shrink when the window area is less than 1000px.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Hi cactuscake,

    Have a go with this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Edit Page</title>
    
    	<style type="text/css">
    	
    		.cont {	
    			max-width: 1000px;
    			margin:0 auto;
    		}
    		
    		.head {
    			background-color: purple;
    		}
    		
    		.left {
    			float:left;
    			width: 200px;
    			background-color: red;
    		}
    		
    		.main {
    			float:right;
    			max-width: 790px;
    			background-color: blue;
    		}
    		
    		.foot {
    			height:200px;
    			max-width: 1000px;
    			background-color: yellow;
    		}
    	
    	</style>
    
    </head>
    <body>
    
    	<div class="cont">
    		<div class="head">Stuff at top</div>
    		<div class="left">Stuff at left</div>
    		<div class="main">Stuff at right</div>
    		<div class="foot">Stuff at bottom</div>
    	</div>
    
    </body>
    </html>
    Of note:

    1. Cleaned up your code formatting--it was really hard to read with the tabbing scheme you had in place.
    2. Removed the align=center from your HTML. Layout belongs in the CSS, not in the markup.
    3. Used the margin:0 auto method to center your page and put the max-width on your container. By default divs (and other block-level items) will expand to 100% the width of their containing element unless given an explicit width).

    You should know that min- and max-widths and heights have some cross-browser compatibility issues (IE6 doesn't like them).
    Last edited by BoldUlysses; 02-26-2009 at 09:57 PM.
    matt | design | blog

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Matt,

    Thanks, that works! At least, it does in FF and Safari. I'm on a Mac so my IE testing platforms are somewhat limited. I have an IE6 emulator that runs on WineHQ, when I view the page on that it seems to throw away the max-width attribute and fills the whole window... does it do this on the real version of IE too? *edit* looks like you already answered this, I need to read more carefully */edit*

    Sorry about the code tabbing, it was tidier in the editor I'm using but messed up when I pasted it into the forum message thing.


  •  

    Posting Permissions

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