empy div positioning in 3 colums layout

Question

ghaith 0 Newbie Poster

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

html-css web-design

2 Contributors
1 Reply
126 Views
19 Hours Discussion Span
Latest Post 17 Years Ago Latest Post by essential

Dani AI

Generated 9 Months Ago

Short answer: make the three columns siblings in the same wrapper and either (A) float the left and right columns while giving the centre column side margins that match the floats, or (B) use flexbox and let the middle column flex. The layout in the original post places #Right outside #InsideWrap, which is why a floated #Right "breaks" things — floats must be inside the same containing block or the maths/flow won't match.

Float-based approach (works in very old browsers)

/* wrapper must contain floats */
#InsideWrap { width:1000px; margin:0 auto; overflow:auto; box-sizing:border-box; }

/* columns */
.left  { float:left;  width:210px; }
.right { float:right; width:138px; }
.center{ margin:0 138px 0 210px; min-height:800px; }

Notes: move the right column inside #InsideWrap so all three are siblings. Ensure the sum of left+center+right widths (including margins, padding, borders) does not exceed the wrapper width. If you prefer a clearfix instead of overflow:auto, use a lightweight rule like .clearfix::after { content:""; display:table; clear:both; }.

Modern (recommended) flexbox approach

#InsideWrap { display:flex; width:1000px; margin:0 auto; align-items:flex-start; }
.left  { flex:0 0 210px; }
.center{ flex:1 1 auto; min-height:800px; }
.right { flex:0 0 138px; }

Flexbox keeps things simple: left/right fixed, centre grows. It avoids fragile margin math and float containment issues.

Extra troubleshooting tips

Inspect computed widths in browser DevTools to catch overflow from padding/border — use box-sizing:border-box to simplify sizing.
If you must keep the current HTML (right outside), use absolute positioning tied to a positioned ancestor, but only as a last resort.
pointed toward float/percentage layouts; flexbox is a cleaner option today — see MDN for details: and the float spec: float on MDN.

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>