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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help stacking divs

    hey im trying to stack divs but they keep pushing themselfs apart.

    here is what it looks like in dreamweaver





    then here is what it looks like in IE/firefox




    anyone know of any code to stack picture div (pink) over the red div

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello chackonman,
    The caps are nice for explaining what's wrong and how you want it to look but it's impossible to see what's causing the issue without looking at your code.
    Quote your code here and we'll have another look.
    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

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HTML
    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>Untitled Document</title>
    <link href="css.css" rel="stylesheet" type="text/css" /></head>
    
    <body class="css">
    <div id="headcontainer">
      <div id="Header">
        <p>Content for  id "Header" Goes Here  </p>
      </div>
    </div>
     <!--<div id="menbodholder"> No need for this anymore--> 
         
       
        <div id="sideholders">
          <div id="rightmen">g</div>
          <div id="leftmen">f</div>
        </div> 
        
      <!--</div> end div for menbodholder -->
      
    <div id="contentholder">
          <div id="contimgholder">
            <div id="img"></div>
        </div>
          <div id="content"></div>
    </div>
    </body>
    </html>
    CSS
    Code:
    @charset "utf-8";
    .css {
    	background-color: #3CF;
    	background-image: url(background.jpg);
    }
    . {
    margin:0;
    padding:0;
    }
    #headcontainer { 
         height: 150px;
    	 width:1100px;
       	 background-color:gray; -->
    }
    
    #Header {
    	margin-left:auto;
    	margin-right:auto;
    	width: 400px;
    	height:130px;
      background-color:yellow; -->
    }
    
    
    
    <!--#bodmencont {    uneeded anymore --> 
    <!--    width:500px;  	-->
    <!--	height:400px; -->  
    	
    <!--} -->
    	
    
    
    
    
    
    
    
    #rightmen {
        float:right;
    	height:500px;
    	width:250px;
         background-color:green; -->
    
    }
    
    #leftmen {
    	float:left;
        width:250px;
    	height:500px;
         background-color:green; -->
    	
    }
    
    #sideholders {
      	width:1100px;
    	
    	
    }
    #contentholder {
     width:650px;
     height:20px;
     
    }
    
    #content {
      width:600px;
      height:500px;	
       background-color:red; -->
    }
    
    #Image {
      width:300px;
      height:200px;
      float:right;
    }
    
    #contimgholder {
      height: 10px;
      width: 10px;
      float: right;
    }
    
    #img {
      height:200px;
      width:200px;
      float:left;
      position:relative;
        background-color:pink;
    }
    Last edited by chackonman; 11-30-2009 at 07:07 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Your box model is off. Your content cannot be bigger than its container. For example, you have #contimgholder set at width and height 10px; but you put a 200px square img div inside it. Then you have all that in 20px by 650px #contentholder. Have a look at how the box model works.

    You have #contimgholder outside of #sideholder but want it displayed inside it. To display like your second screencap you will need to have #contimgholder in the same div with the right and left men floated.
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Have a look at this -
    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.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 1100px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #headcontainer { 
    	height: 150px;
    	background: #ccc;
    }
    #header {
    	width: 400px;
    	height: 130px;
    	margin: 0 auto;
    	background: #ff0;
    }
    #rightmen {
    	float: right;
    	height: 500px;
    	width: 250px;
    	background: #0f0;
    }
    #leftmen {
    	float: left;
    	width: 250px;
    	height: 500px;
    	background: #0f0;	
    }
    #contentholder {
    	height: 500px;
    	margin: 0 250px;
    	background: #f00;
    }
    #contimgholder {
    	height:200px;
    	width:300px;
    	margin: 0 auto;
    	background: #fcf;
    }	
    </style>
    </head>
    <body>
        <div id="container">
            <div id="headcontainer">
                <div id="header">
                	<p>Content for  id "Header" Goes Here  </p>
                <!--end header--></div>
            <!--end headcontainer--></div>
        <div id="rightmen">g</div>
        <div id="leftmen">f</div>
            <div id="contentholder">
                <div id="contimgholder">
                    <img src="#" alt="description" id="img" />
                <!--end contimgholder--></div>
            <!--end contentholder--></div>            
        <!--end container--></div>
    </body>
    </html>
    There is no need for #contimgholder, an image is perfectly fine on it's own without it's own div.
    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

  • Users who have thanked Excavator for this post:

    linehand (12-03-2009)

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey! thanks for that help man

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also i dont just need a static pic i need one which i click a button and it changes to another image. thanks

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    I thanked Excavator because that was a very well thought out and helpful post which really deserved a thanks, though I really think chackonman should have done the thanking here himself - being new he may not have realized it.


  •  

    Posting Permissions

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