Website support

HTML & CSS
1

Hello,

I have a website that has html/php I was wondering how can I add a center for my website here is the [SIZE=“4”]link[/SIZE] as you can see it only has left and right but no center, on the left I would like to add some boxes this is my main page.

2

You coud adjust your css like this



#wrapper {
    width:1020px;
    margin:0 auto;
    overflow: hidden;
    border-left:2px solid #DF0101;
    border-right:2px solid #DF0101;
}

.sidebar { /* class instead of id since we gonna use the sidebar twise */
    width:220px;
    min-height: 100px;
    margin-bottom:25px;
    float:left;
    color:white;
}

.right {/* class to float the second sidebar right */
    float: right
}

#content {
    width:580px;
    min-height: 100px;
    float:left;
     /* I took the padding out!  It is better to use padding or margin on the containing content like paragraphs etc */
}

and in your html


<div id="wrapper">

	<div id="header">
		<h2>HyperFragServers</h2>
	</div> <!-- end #header -->
    
	<!-- start Navigation --> 
    <div id="nav">

	</div> <!-- end #nav -->

	<!-- start sidebar left -->    
	<div class="sidebar">

	</div><!-- end sidebar left -->    
	 
 	<!-- start content -->    
	<div id="content">

	</div> <!-- end #content -->

	<!-- Start sidebar right -->
	<div class="sidebar right">

	</div> <!-- end #sidebar -->


	<div id="footer">
		<p>Copyright &copy; HyperFrag Servers All Rights Reserved.</p>
	</div> <!-- end #footer -->

</div> <!-- End #wrapper -->

Hope this is what you need .

3

thanks for replying but it looks a bit distorted I was thinking something more along the lines of this and [url=http://www.multiplaygameservers.com/]this basically the layout like that, I was trying myself but nothing.

4

Maybe I missed something but this is what you wrote in the first post:

I was wondering how can I add a center for my website here is the link as you can see it only has left and right but no center, on the left I would like to add some boxes this is my main page.
and that is exactly what I did, give you a three column layout. Talking about the examples. Both of them, as far as I can see, are two column layouts, just like yours, they only make better use of the space.

5

No take a look at the site I meant up/down columns

6

I’m sorry Matt, but you have to be a bit more precise. What do you mean with up/down columns?

7

2 left Columns, a few right then a big center columns for news and such.

8

In the example I gave you there are three floating divs involved. But if you do a little bit of math ( you have to keep the width of the wrapper in mind ) you can of course use more columns. But what is more important I think, is understanding the principles of floating elements. If you understand that, you can position elements nearly everywhere you want, may it be with one, two, three or how many columns you would like. Here is an example of four columns. Two small ones at the left, a wider one in the middle and a small one to the right.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
    width:1020px;
    margin:100px auto 0;
    overflow: hidden;
	background: blue;
}
 
.sidebar, .content {
    width:200px;
    min-height: 100px;
    float:left;
    color:white;
	background: #000;
}

.left {
	width: 220px;
	min-height: 100px;
	background: red;	
}

.right {
    float: right;
	background: red;
}
 
.content {
    width:400px;
	margin-top: 10px;
	background: yellow;
}
</style>
</head>

<body>

<div id="wrapper">

	<!-- Start First Sidebar Left -->
	<div class="sidebar">

	</div><!-- End Second Sidebar Left -->
    
    <!-- Start Second Sidebar Left  -->
	<div class="sidebar left">
    
    </div><!-- End Second Sidebar Left -->
    
    <!-- Start Content -->
	<div class="content">
	
    </div><!-- End Content -->
    
     <!-- Start Sidebar Right -->
	<div class="sidebar right">
	
    </div><!-- End Sidebar Right -->
    
</div>     
      
</body>
</html>