PDA

View Full Version : div next to div


berlin28
11-14-2008, 10:02 AM
hi there again,
i wantet to ask if its possible to set in a div 2 divs or mehr next to each other!

i am designing a center layout

here is my hole code: thanks a lot!

--------------------------------------------------------------------------------------

<html>
<head>
<title>Centering a page layout with CSS</title>
<style type="text/css">
<!--
body {
text-align: center;
min-width: 760px;
background-image: url(index_backround.jpg);
}
#wrapper {
width: 760px;
background-image:url(index_banner.jpg);
text-align: left;
background-repeat: no-repeat;
height: 140px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}
.style1 {color: #FFFFFF}
#apDiv1 {
width:760px;
height:25px;
margin-left:auto;
margin-right:auto;
z-index:1;
}
#apDiv2 {
background-image:url(index_wall_760_gray.jpg);
top:198px;
width:760px;
height:380px;
z-index:-1;
margin-left:auto;
margin-right:auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#apDiv3 {
margin-left:auto;
margin-right:auto;
top:539px;
width:760px;
height:25px;
z-index:1;
background-image:url(index_footer.jpg);
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
background-repeat: repeat-x;
border-bottom-style: none;
}
#apDiv4 {
background-color:#00FF33;
margin-left:0;
top:184px;
width:80%;
height:56px;
z-index:1;
}
.style2 {color: #FF0000}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div class="style1" id="wrapper">
<p><br>
<br>
<br>
</p>
<p><br>
</p>
</div>
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','760','heigh t','25','title','index_buttons','src','index_butto ns','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','index_buttons' ); //end AC code
</script>
<noscript>
<object classid="clsidhttp://www.webdeveloper.com/forum/images/smilies/biggrin.gif27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="760" height="25" title="index_buttons">
<param name="movie" value="index_buttons.swf">
<param name="quality" value="high">
<embed src="index_buttons.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="760" height="25"></embed>
</object>
</noscript>
</div>
<div id="apDiv2"><div class="style2" id="apDiv4">
<div align="left"><br></div>
</div>
</div>
<div id="apDiv3"></div>

</body>
</html>

berlin28
11-14-2008, 10:04 AM
i mean next to the apDiv4 i want another div xent to it

domedia
11-14-2008, 12:47 PM
Just float the first div to the left.

berlin28
11-14-2008, 02:22 PM
<html>
<head>
<title>Centering a page layout with CSS</title>
<style type="text/css">
<!--
body {
text-align: center;
min-width: 760px;
background-image: url(index_backround.jpg);
}
#wrapper {
width: 760px;
background-image:url(index_banner.jpg);
text-align: left;
background-repeat: no-repeat;
height: 140px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}
.style1 {color: #FFFFFF}
#apDiv1 {
width:760px;
height:25px;
margin-left:auto;
margin-right:auto;
z-index:1;
}
#apDiv2 {
background-image:url(index_wall_760_gray.jpg);
top:198px;
width:760px;
height:380px;
z-index:-1;
margin-left:auto;
margin-right:auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#apDiv3 {
margin-left:auto;
margin-right:auto;
top:539px;
width:760px;
height:25px;
z-index:1;
background-image:url(index_footer.jpg);
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
background-repeat: repeat-x;
border-bottom-style: none;
}
#apDiv4 {
background-color:#00FF33;
margin-left:0;
top:184px;
width:80%;
height:56px;
float:left;
z-index:1;
}
.style2 {color: #FF0000}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div class="style1" id="wrapper">
<p><br>
<br>
<br>
</p>
<p><br>
</p>
</div>
<div id="apDiv1">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','760','heigh t','25','title','index_buttons','src','index_butto ns','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','index_buttons' ); //end AC code
</script>
<noscript>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="760" height="25" title="index_buttons">
<param name="movie" value="index_buttons.swf">
<param name="quality" value="high">
<embed src="index_buttons.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="760" height="25"></embed>
</object>
</noscript>
</div>
<div id="apDiv2"><div class="style2" id="apDiv4">
<div align="left"><br></div>
</div>
</div>
<div id="apDiv3"></div>
</body>
</html>

berlin28
11-14-2008, 02:23 PM
#apDiv4 {
background-color:#00FF33;
margin-left:0;
top:184px;
width:80%;
height:56px;
float:left;
z-index:1;
}
i did this know i have to add the new div?

domedia
11-14-2008, 02:26 PM
Yes if you want to have 2 div's side by side, just float the first one.

berlin28
11-14-2008, 02:27 PM
no the probles ist that i dont know how to puthem next to each other!

schall i draw only a div next to the apdiv 4?

domedia
11-14-2008, 02:40 PM
Yes insert a div next to your existing div and confirm in your source code that one div is after the other :) You could have just tried it.. never hurts ;)

ps: please use the code tags in the forum editor when pasting code.

berlin28
11-14-2008, 02:44 PM
i did it!!!!! :) :) :)

thanks a lot!