0

Hey, i have a simple, almost 3 columns layout, (2 and one empty which will just display images for the sake of the layout)
the left div, containing the menu is float left, the wrapper for the left div and the content (second middle div) has clear:both, now i'm not sure how to place the third one, which is in a top wrapper, called wrapperbg, float right destroys the layout of the main wrapper, and if i specify a width, it's coming on the left most side of the screen under the 2 divs, and not as a 3rd column

here's my code and relevant CSS, any help is appriciated.

<?php // no direct access 
	defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!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"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
    <div id="Container">
        <div id="Header">
            <div id="Logo">
                <h1>Dentix Lab</h1>
            </div><!--Logo-->
         </div><!--Header-->
         <div id = "WrapBg">
            <div id="InsideWrap">
            	<div id="Left">
                    <div id="Menu">
                        <jdoc:include type="modules" name="left" />
                    </div><!--Menu-->
                </div>
                <div id="Content">
                	<jdoc:include type="component" />
                </div><!--Content-->
            </div><!--InsideWrap-->
            <div id="Right">
            </div><!--Right-->
      </div><!--WrapBg-->
     <div id="Footer">
        <div id="BottomMenu">
        <br />
        </div><!--BottomMenu-->
        <div id="CopyRights">
            <p>Copyrights</p>
        </div><!--CopyRights-->                
    </div><!--Footer-->
</div><!--Container-->  
</body>
</html>
@charset "utf-8";
/* CSS Document */
html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	}

img {
	border:0;
}
#Container 
{
	background-image: url(../Images/Bg.png);
	background-repeat: repeat-y;
	overflow:hidden;
	width:1000px;
	margin: 0pt auto;
	padding-bottom:10px;
	
}
#Header {
    width:1000px;
	height:293px;
    background-image: url(../Images/HeadTitle.png);
    background-repeat: no-repeat;
    margin: 0pt auto;
	position:relative;
	top:0px;
	padding-top:1px;
}

#Logo {
	visibility:hidden;
}

#WrapBg {
	width:1000px;
	background-color:#e5e5e5;
}

#InsideWrap
{
	width:730px;
	margin:0pt auto;
	background-color:#FFFFFF;
	padding-top:1px;
	margin-left:90px
}

#Footer {
	position:relative;
	clear:both;
	overflow:hidden;
}

#BottomMenu {
	background-image:url(../Images/Bg.png);
	background-repeat:repeat-y;
}
#CopyRights {
	background-color:#de1125;
	overflow:hidden;
	padding-top:1px;
}

#Left {
	width:210px;
	background-color:#f6f6f6;
	float:left;
	text-align:center;
}

#form-login .input {
	width : 150px;
	border:none;
}

#form-login input {
	width:120px;
}
#Content {	
	width:540px;
	margin-left:180px;
	position:relative;
	overflow:hidden;
	background-color:#ffffff;
	min-height:800px;
}
.ParagraphText {
}
.ParagraphImage {
	float:right;
}
#MidTop {
	
}
#MidCenter {
	background-color:#f6f6f6;
}

#Menu .MenuTitle {
	Position:relative;
	min-height:30px;
	background-color:#de1125;
	width:215px;
	text-align:center;
	font-variant:small-caps;
	color:#FFFFFF;
	padding-top:15px;
}

#Menu li {
	list-style-image:url(../Images/Arrow.png);
	font-size:0.8em;
	font-weight:bold;
	height:30px;
	width:215px;
	display:block;
	padding-top:10px;
	background:url(../Images/ButtomMenu.png) bottom no-repeat;
	color:#FFF;
}

#Menu ul :hover{
	background-image:url(../Images/MenuBg.png);
	background-repeat:repeat-y;
	color:#FFF;
}

#Menu ul {
	padding-left:0px;
	padding-top:0px;
	margin-left:0px;
	margin-right:0px;
}

#Menu a {
	color:#000;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
	height:30px;
	width:215px;
	display:block;
}

#Menu a :hover {
	height:30px;
	width:215px;
	display:none;
	color:#FFF;
	/*background-color:none;*/
}

#BottomMenu {
	Height:150px;
}

#Right {
	width:138px;
	height:800px;
	background:url(../Images/BottomRightBg.png) no-repeat bottom right;
	position:relative;
}
2
Contributors
1
Reply
2
Views
8 Years
Discussion Span
Last Post by essential
0

Im not sure if this what you need, but i hope it helps.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10T" xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<jdoc:include type="head" />
<style type="text/css">
/* <![CDATA[ */
img { border : none; }

html, body {
   margin : 0;
   padding : 0;
   text-align : center;
   height: auto;
   width : auto;
   min-width : 1000px;
}
div {
   border : none;
   margin : 0;
   padding : 0; }

#Container {
     background-color : #fff;
/*   background-image: url(../Images/Bg.png);
   background-repeat: repeat-y 0 0; */
   overflow : hidden;
   width: 100%;
   margin: 0 auto;
   padding-bottom: 1em; }

#Header {
   float : left;
   height : 100%;
   width : 100%;
   clear : both;
   min-height : 293px;
   max-height : 293px;
/*   background-image: url(../Images/HeadTitle.png);
    background-repeat: no-repeat; */
   background-color : #f0f0f0;
   margin: 0 auto;
   position:relative;
   top: 0;
   padding-top : 1px;
}

#WrapBg {
   float : left;
   clear : left;
   width: 100%;
   background-color:#e5e5e5;
}

#InsideWrap {
   float : left;
   width : 70%;
   background-color:#FFFFFF;
} #InsideWrap div.tube {
/* Additional wrapper ( tube class ) */
/*   padding-top:1px;
   margin-left: 90px; */ }

#Left {
   width: 30%;
   min-height : 800px;
   background-color:#f6f6f6;
   float: left; /* With Cleared left */
   text-align:center;
}

#Content {
   background-color : #aaa;
   float : left;
   width: 70%;
   position : relative;
   overflow:hidden;
/*   background-color:#ffffff; */
   min-height:800px;
}  #Content div.tube {
/* Additional Layer ( tube class ) 
   margin-left:180px; */ }

#Right {
   float : right;
   clear : right;
   background-color : #ccc;
   width: 30%;
   height:800px;
   /* background:url(../Images/BottomRightBg.png) no-repeat bottom right; */
   position:relative;
}
/* #Footer {
   position:relative;
   clear:both;
   overflow:hidden;
} */ 
#Footer {
   float : left;
   clear : both;
   background-color:#de1125;
   overflow:hidden;
   width : 100%;
/*   padding-top:1px; */
}
/* ]]> */
</style>
</head>
<body>
<div id="Container">
<h1>#Container</h1>
<div id="Header">
<div class="tube">
<div id="Logo"><h1>#Hearder</h1></div><!--Logo-->
</div> <!-- tube -->
</div><!--Header-->

<div id="WrapBg">
<h1>#WrapBg</h1>
<div id="InsideWrap">
<div class="tube">
<div id="Left">
<h1>#Left</h1>
<div id="Menu"><jdoc:include type="modules" name="left" /></div><!--Menu-->
</div><!-- Left -->

<div id="Content">
<div class="tube"><h1>#Content</h1>
<jdoc:include type="component" />
</div> <!-- tube -->
</div><!--Content-->
</div> <!-- tube -->
</div><!--InsideWrap-->

<div id="Right"><h1>#Right</h1></div><!--Right-->

</div><!--WrapBg-->

<div id="Footer">
<div id="BottomMenu">
        <br />
</div><!--BottomMenu-->
<div id="CopyRights"><h1>#Copyrights</h1></div><!--CopyRights-->  
</div><!--Footer-->
</div><!--Container-->  
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.