SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning of Div: What the heck?

    Hello!

    Well, I was already writing a little suicide-note a few minutes ago, because I just couldn't seem to get a simple two-column layout to work correctly. But then I had this litte idea of asking some CSS-experts in here, so I threw the note away and got online. So maybe someone in here can save my life, that has been tortured by CSS over and over again.

    I have a little problem with positioning a div, as you can see in the screenshot I attached. I honestly tried everything, but it just doesn't want to work. Inventing complicated algorithms? Writing complex frameworks? Maybe a CMS? Count me in! But position a div with CSS? No, not for a million dollars(maybe for two, though).

    Here is the html-code first:
    HTML Code:
    		<!-- The header -->
    		<div class="headerBox">
    			Testing
    		</div>
    		
    		<div class="pageFrame">
    			<!-- The left-menu -->
    			<div class="menuStrip">			
    				Menu Content Bla
    				<br /><br /><br />Bla Bla
    				<br />Very important text...
    				<br /><br /><br />Bla Bla
    				<br />Very important text...
    				<br /><br /><br />Bla Bla
    				<br />Very important text...
    				<br /><br /><br />Bla Bla
    				<br />Very important text...
    			</div>
    			
    			<!-- The content -->
    			<div class="contentStrip">
    				Test-content
    				<br /><br /><br />VERY IMPORTANT
    				<br />Not working...
    			</div>
    		</div>
    And now the CSS-file:
    Code:
    html {
    	text-align: center;
    	width: 97%;
    }
    
    body {
    	width: 92%;
    	background-color: #FFFFFF;
    	font-size: 14px;
    	margin: 0 auto;
    	padding: 0px;
    	cursor: default;
    	font-family: Tahoma;
    	text-align: left;
    }
    
    /* Header */
    div.headerBox {
    	width: 100%;
    	padding: 5px;
    	margin: 0 auto;
    	background-color: #517AEC;
    }
    
    div.pageFrame {
    	margin: 0 auto;
    	padding: 0px;
    	width: 100%;
    }
    
    /* Left-Menu */
    div.menuStrip {
    	border: 1px solid #112F83;
    	border-right: 3px solid #112F83;
    	padding: 5px;
    	padding-top: 20px;
    	width: 25%;
    	background-color: #F4F4F4;
    	color: #112F83;
    	min-height: 100px;
    	float: left;
    }
    
    /* Content Strip */
    div.contentStrip {
    	width: 73%;
    	padding: 3px;
    	background-color: #DADADA;
    	float: left;
    }
    Ok, I found out that it has something to do with the padding of the div.headerBox. With padding: 0px I can get it to work fine, but not anyway else. Any ideas? I should probably note, that I want to retain width-information in percents, if it is possible. If not, then it is fine too, but I would rather like it that way.

    Help would really be appreciated.
    Attached Images Attached Images

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    set width's on main containers , padding and margin on elements in the containers
    block level elements always sretch horizontal to there containers or screen, so need no width

    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	
    	html {
    	text-align: center;
    	width: 97%;
    	}
    
    	body{
    	width:92%;
    	background:#FFFFFF;
    	font-size:14px;
    	margin: 0 auto;
    	cursor: default;
    	font-family: Tahoma,sans-serif;
    	text-align: left;
    	}
    
    	/* Header */
    	.headerBox {background:#517AEC;}
    	.headerBox p{padding:5px;}
    
    	.pageFrame{width:100%;overflow:hidden;background:#DADADA;}
    
    	/* Left-Menu */
    	.menuStrip {
    	width: 25%;
    	background:#F4F4F4;
    	color:#112F83;
    	min-height:100px;
    	float:left;
    	}
    	.menuStrip p{
    	border:1px solid #112F83;
    	border-right:3px solid #112F83;
    	padding:20px 5px 5px 5px;
    	}
    
    	/* Content Strip */
    	.contentStrip {
    	width:75%;
    	background:#DADADA;
    	float:left;
    	}
    	.contentStrip p{padding:3px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div class="headerBox"><p>Testing</p></div>
    
    <div class="pageFrame">
    <!-- The left-menu -->
    <div class="menuStrip">
    <p>
    Menu Content Bla
    <br /><br /><br />Bla Bla
    <br />Very important text...
    <br /><br /><br />Bla Bla
    <br />Very important text...
    <br /><br /><br />Bla Bla
    <br />Very important text...
    <br /><br /><br />Bla Bla
    <br />Very important text...
    </p>
    </div>
    
    <!-- The content -->
    <div class="contentStrip">
    <p>
    Test-content
    <br /><br /><br />VERY IMPORTANT
    <br />Not working...
    </p>
    </div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my god, really, really big thanks for that! I was about to give up everything (I was very tired!), but thanks for helping me out.
    This is a very important aspect of designing, can't believe I haven't heard of it before. This will definatly help me in the future.


Bookmarks

Posting Permissions

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