empy div positioning in 3 colums layout

Question

ghaith 0 Newbie Poster

15 Years Ago

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

web-design

2 Contributors
1 Reply
108 Views
19 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2009-06-06T16:35:50+00:00

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>