Page 1 of 1

positioning with div's

Posted: Tue 2. Aug 2005, 20:57
by Zym0tiC
I'm trying to build a website with div's icm with the 2 column
template. My problem is that the left column doesn't scales with the
right column.
So I tried to place both div's in another div and asign the background
image to the center div.

Structure:

Code: Select all

<div id"container">

   <div id"container">

   <div id"headerBlock"></div>
   <div id"center">
       <div id"leftBlock">menu</div>
       <div id"rightBlock">content</div>
   </div>

   <div id"footer"></div>

</div>
But then I have troubles with positioning the left and right div's in
the center div.

My css:

Code: Select all

#container {
	width: 760px;
	\width: 780px;
	w\idth: 760px;
	border: 1px solid gray;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

#banner {
	padding: 0px;
	margin-bottom: 0px;
	height: 160px;
	background: url(banner.jpg);
}
		
#mainBlock {
	width: 760px;
	background: url(bg_l_r.jpg);
}

#content {
	padding: 5px;
	margin-left: 200px;
        height: 100%;
}

#menu {
	float: left;
	width: 200px;
	\width: 200px;
	w\idth: 200px;
	margin: 0;
	margin-right: 0px;
	padding: 5px;
	height: 100%;
}

#footer {
	clear: both;
	padding: 0px;
	margin-top: 0px;
	background: url(footer.jpg);
}
Very strange because this code does works for a normal .html file written with a text editor

Posted: Thu 1. Jun 2006, 15:55
by Nordlicht
There is no center, leftBlock and rigthBlock in your css!

Code: Select all

div.center {
width: 99%;
text-align:justify;
}

div.leftBlock {
float:left;
width:48%;
text-align: justify;
padding: 5px;
padding-bottom:11px;
border: thin solid #000000;
margin-bottom: 10px;
}

div.rightBlock {
float:right;
width:48%;
text-align: justify;
padding: 5px;
padding-bottom:11px;
border: thin solid #000000;
margin-bottom: 10px;
}

This should do it.
Unless you use <ul> I don't know why, but the bullets are out of the div box when you use this in phpwcms.
In a normal html page it shows up right.