HTML Forum

**tima89** · 03-16-2005, 07:12 AM

Ok, finally i decided to convert my page (the one in sig) to CSS. I started allright, and got most part of the basic layout. Now i met the problem i would never think i would in my life - HOW TO CENTER ??!?!//sorry for the lame question, but it really bothers me
So i made a simple test layout:

HTML Code:

<html><head>
<style>
#top {
  width: 750px;
}
#leftside {
  float: left;
  width: 150px;
}
#rightside {
  float: left;
  width: 150px;
}
#leftcontent {
  float: left;
  width: 150px;
  background: black;
  border: blue solid 1px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
}
#rightcontent {
  float: left;
  width: 595px;
  background: black;
  border: blue solid 1px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#frame {
  width: 750px;
  margin: auto;
}
</style>
</head>
<body bgcolor="#7F7F7F">
<div id="top">
<IMG src="http://timurkz.buildtolearn.net/banner.jpg" width=750 height=176 border="1" alt="">
  </div>
 <div id="leftside">
 <div id="leftcontent"> <p style="color: white;">
 left content<br>row 1
 </div>
 <div id="leftcontent">  <p style="color: white;">
 left content<br>row 2
 </div>
 <div id="leftcontent"> <p style="color: white;">
 left content<br>row 3
 </div>
  </div>
 <div id="rightside">
 <div id="rightcontent">  <p style="color: white;">
 awdioawdioawnd<br>awdawd
 </div>
 </div>
</body>
</html>

And i want the whole content to be aligned in the center. I searched the net and found that many people have similar problems, but the solutions they got don't work for me. If i include the whole thing into another DIV the right content part gets moved down below the left part. About the "auto" method for the margins - i do need to save the margins on internal blocks at 5 pixels ( at least not 0 ). So there is probably a way to get over that "right below left" problem and include that whole thing into another div. I even tried putting it all in a table, but it turned out the same - righ below left.
Please help, and sorry again for stupid question
I know that it was discussed several times before, but the solution don't apply to my layout for some reason

**Phobz** · 09:06 AM

Hi

Maybe this may help

http://www.glish.com/css/9.asp - 2 Columns
http://www.glish.com/css/7.asp - 3 Columns
(ps. the 3 columns shows how to centre all the page)

Not sure if this is the right thing im giving you but I think it may be helpful.

Regards
Paul

**tima89** · 03-16-2005, 11:59 AM

Thanks for the reply, but i have already tried these methods. The whole problem is, that i have more than one row on the left, and including the whole thing into another div destroys the layout. Does anybody know of a source/tutorials on making a similar layout, but with several rows?

**drewrockshard** · 03-16-2005, 12:34 PM

hope this helps...i added a #wrapper element (CSS) and a body selector (for browsers that cant support the auto margin rule...heres your updated code with my added code...

HTML Code:

<html>
<head> 
<style> 
body {
	text-align:center;
}
#wrapper {
width:750px;
display:block;
margin:0 auto;
padding:0;
}
#top { 
width: 750px; 
} 
#leftside { 
float: left; 
width: 150px; 
} 
#rightside { 
float: left; 
width: 150px; 
} 
#leftcontent { 
float: left; 
width: 150px; 
background: black; 
border: blue solid 1px; 
margin-top: 5px; 
margin-bottom: 5px; 
margin-right: 5px; 
text-align:left;
} 
#rightcontent { 
float: left; 
width: 595px; 
background: black; 
border: blue solid 1px; 
margin-top: 5px; 
margin-bottom: 5px; 
text-align:left;
} 
#frame { 
width: 750px; 
margin: auto; 
} 
</style> 
</head> 
<body bgcolor="#7F7F7F">
<div id="wrapper"> 
<div id="top"><IMG src="http://timurkz.buildtolearn.net/banner.jpg" width=750 height=176 border="1" alt=""></div>  
<div id="leftside">
	<div id="leftcontent">
		<p style="color: white;">left content<br>row 1</div>
	<div id="leftcontent"> 
		<p style="color: white;">left content<br>row 2</div>  
	<div id="leftcontent"> 
		<p style="color: white;">left content<br>row 3</div>
</div>  

<div id="rightside">  
	<div id="rightcontent"> 
		<p style="color: white;">awdioawdioawnd<br>awdawd 
	</div> 
</div> 
</div>
</body> 
</html>

this should now be centered and working.

let me know.

**tima89** · 03-16-2005, 01:05 PM

No, unfortunately this results in appearing of the right side below the left. I am sure there would be ways around it. The only solution possible for now is to make a table in the left div, and include all the rows in that table. I however started remaking the site just because i wanted it to be css - and there is no reason for making it with another table.
edit: the layour is somewhat like portals - php-nuke, mambo e.t.c. Do you know if there is a version of those that uses css? Please give a url of a site that is centered, contains 2+ columns and several rows.

**drewrockshard** · 03-16-2005, 01:10 PM

what exacly are you testing in? from what you are saying, the right content area is below the left boxes. i have tested my code in opera 7.5, FF 1.1, and IE 6 and they all are showing the right content box to the right of the left boxes...

please reply

**tima89** · 11:25 AM

Well i do indeed get the layout display correctly in firefox, but ie (i also have 6) still messes it up. I didnt change the code you gave me, and this is what i get:
http://timurkz.buildtolearn.net/layout.jpg
How come we get different things?

**drewrockshard** · 03-16-2005, 02:23 PM

do you mind if i redesign your code?

**drewrockshard** · 03-16-2005, 02:55 PM

ok heres your fix...i redid all the code (well 90% of it) it should be self explanatory and more organized. let me know how it is please!

HTML Code:

<html>
<head> 
<style> 
body {
	padding:0;
	margin:0;
	text-align:center;
	background:#7F7F7F;
}
#wrapper {
	width:750px;
	display:block;
	margin:0 auto;
	padding:0;
}
#header { 
	width: 748px;
	height:176px;
	display:block;
	background:url('http://timurkz.buildtolearn.net/banner.jpg') no-repeat;
	border:1px #000 solid;
} 
#content {
	display:block;
	width:750px;
	margin-top:5px;
	padding:0px;
}
html>body #content { margin-top:-10px; } /* be nice to IE */
#leftside { 
	float: left; 
	width: 148px; 
	display:block;
} 
#leftside p {
	color:#fff;
	background:#000;
	border:1px #03f solid;
}
#rightside { 
	float: right; 
	width: 595px; 
	display:block;
} 
#rightside p {
	color:#fff;
	background:#000;
	border:1px #03f solid;
}

#frame { 
width: 750px; 
margin: auto; 
} 
</style> 
</head> 
<body>
<div id="wrapper"> 
<div id="header"></div> 
<div id="content"> 
	<div id="leftside">
		<p>left content<br>row 1</p>
		<p>left content<br>row 2</p>
		<p>left content<br>row 3</p>
		<p>left content<br>row 4</p>
		<p>left content<br>row 5</p>
		<p>left content<br>row 6</p>
	</div>  

	<div id="rightside">  
		<p>awdioawdioawnd<br>awdawd</p>
	</div> 
</div> 
</div>
</body> 
</html>

like i said, please let me know how this worked (or didnt work heh)...thanks.

**tima89** · 03-18-2005, 07:09 AM

Thank you, drewrockshard - the method does work. I didn't know that you can use p's for that... I however didn't like the mehod because everytime i use p in my content it messes up the page. Instead i found the way to do it, all with div's.
Thank you very much guys, i really appreciate your help.

**drewrockshard** · 03-18-2005, 11:13 AM

welcome. anytime

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!