...

View Full Version : need help stacking divs



chackonman
11-30-2009, 05:34 AM
hey im trying to stack divs but they keep pushing themselfs apart.

here is what it looks like in dreamweaver
http://img694.imageshack.us/img694/8251/htmlwork.jpg




then here is what it looks like in IE/firefox

http://img689.imageshack.us/img689/296/inbrowser.jpg


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

Excavator
11-30-2009, 06:56 AM
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.

chackonman
11-30-2009, 07:02 AM
HTML


<!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


@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;
}

Excavator
11-30-2009, 07:29 AM
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. (http://www.w3.org/TR/CSS2/box.html)

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.

Excavator
11-30-2009, 07:47 AM
Have a look at this -
<!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.

chackonman
12-01-2009, 03:45 AM
Hey! thanks for that help man

chackonman
12-01-2009, 03:51 AM
also i dont just need a static pic i need one which i click a button and it changes to another image. thanks

linehand
12-03-2009, 09:18 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum