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 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout: can't avoid overlapping

    Hello everybody from Madrid,

    I've been fighting against CSS for one week now. I want to get a simple layout like the one that is seen on the attachment 'what_i_want.png', but the best I can get is a layout like the one that is seen on 'what_i_get.png'.

    The main container, painted in red, is a <div>. It's inside the <body>, and it has margin-left: auto; margin-right: auto; width: 1000px;

    The blue div has a fixed distance between it's left border and the red container right border.

    I thought it would be better to attach some paintings than pasting here a lot of code which don't really work.

    I would appreciate if you could give me some example. Thank you very much in advance.
    Attached Thumbnails Attached Thumbnails layout: can't avoid overlapping-what_i_want.png   layout: can't avoid overlapping-what_i_get.png  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aspnetwmtr,
    Maybe this will get you started?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	position: relative;
    	z-index: 2;
    	background: #999;
    	border: 5px solid #f00;
    }
    #purple {
    	height: 75px;
    	width: 550px;
    	margin: 10px;
    	border: 5px solid #639;
    }
    #yellow {
    	height: 300px;
    	width: 550px;
    	margin: 10px;
    	border: 5px solid #ff0;
    }
    #green {
    	height: 75px;
    	margin: 10px;
    	border: 5px solid #0f0;
    }
    #kindofred {
    	height: 75px;
    	margin: 10px;
    	border: 5px solid #900;
    }
    #blue {
    	height: 400px;
    	width: 300px;
    	position: absolute;
    	top: 10px;
    	left: 580px;
    	z-index: 1;
    	border: 5px solid #00f;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="purple"></div>
            <div id="yellow"></div>
            <div id="green"></div>
            <div id="kindofred"></div>
            <div id="blue"></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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