DIV tags centering problem

Page 1 of 1

10 Replies - 528 Views - Last Post: 18 July 2009 - 11:59 PM

#1 JkinsonA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-April 09

DIV tags centering problem

Posted 18 July 2009 - 06:22 AM

Hello,

I am pretty new to CSS and div tags, basically this is my problem

<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
			#header
			{
			margin-left:auto;
			margin-right:auto;
			background:#0000CC;
			width:800px;
			height:100px;
			}
			
			#leftcol
			{
			margin-left:auto;
			margin-right:auto;
			background:#00CC66;
			width:150px;
			height:500px;
			}
			
			#content
			{
			margin-left:auto;
			margin-right:auto;			
						float:none;
			background:#996666;
			width:650px;
			height:500px;
			}
			
			#footer
			{
			margin-left:auto;
			margin-right:auto;
			background:#996699;
			width:800px;
			clear:left;
			height:100px;
			}
			
		</style>
		</head>
		<body>
			<div id="header">Header Section</div>
			<div id="leftcol">Left Section</div>
			<div id="content">Content</div>
		   	<div id="footer">Footer Section</div>
		</body>
</html>


How do I center the middle two div areas?

Regards,
JkinsonA

Is This A Good Question/Topic? 0
  • +

Replies To: DIV tags centering problem

#2 newt  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 25
  • Joined: 06-July 09

Re: DIV tags centering problem

Posted 18 July 2009 - 06:24 AM

Hi. You could wrap them in div and then add margin: 0 auto;
Was This Post Helpful? 0
  • +
  • -

#3 newt  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 25
  • Joined: 06-July 09

Re: DIV tags centering problem

Posted 18 July 2009 - 06:29 AM

...try this 
<html>
	<head>
		<title>Untitled Document</title>
<style type="text/css">
#header {
margin-left:auto;
margin-right:auto;
background:#0000CC;
width:800px;
height:100px;
}
.wrap {
width: 800px;
margin: 0 auto;
}
#leftcol {
background:#00CC66;
float: left;
width:150px;
height:500px;
}

#content {
background:#996666;
float: right;
width:650px;
height:500px;
}
		   
#footer {
margin-left:auto;
margin-right:auto;
background:#996699;
width:800px;
clear:left;
height:100px;
}
.clear {
clear: both;
}
		   
		</style>
		</head>
<body>
			<div id="header">Header Section</div>
			<div class="wrap">
			  <div id="leftcol">Left Section</div>
			  <div id="content">Content</div>
			  <br class="clear" />
			</div>
			<div id="footer">Footer Section</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 JkinsonA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-April 09

Re: DIV tags centering problem

Posted 18 July 2009 - 06:34 AM

View Postnewt, on 18 Jul, 2009 - 05:24 AM, said:

Hi. You could wrap them in div and then add margin: 0 auto;


Hey thanks for the input :D

though sorry, I really didnt understand that.... apparently I am really new to CSS >__<
what exactly do u mean by wrap them in divs?

and I tried replacing the margin-left and margin-right with what you said and it still didnt work =/

Regards,
JkinsonA

This post has been edited by JkinsonA: 18 July 2009 - 06:37 AM

Was This Post Helpful? 0
  • +
  • -

#5 JkinsonA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-April 09

Re: DIV tags centering problem

Posted 18 July 2009 - 06:40 AM

Hey, thanks alot for your coding :D

I can now look at it and understand, one question though

the tags with the class IDs, why use the class IDS and what happens when you use them how do you use them?

Thanks again

Regards,
JkinsonA
Was This Post Helpful? 0
  • +
  • -

#6 newt  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 25
  • Joined: 06-July 09

Re: DIV tags centering problem

Posted 18 July 2009 - 06:49 AM

Well, I used class because you can apply the same class on multiple instances; so if you want some images or menu or one more div, and you need it to be centered on page and 800px wide you just apply the .wrap class. If it wasn`t class but id, it could be applied only once per page.
Was This Post Helpful? 0
  • +
  • -

#7 JkinsonA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-April 09

Re: DIV tags centering problem

Posted 18 July 2009 - 10:37 AM

Hey, thanks for your input again but sadly I couldnt use it in a more complex site layout >__<


<html>
<head>
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="layoutMain.css" />

</head>
<body>

<div id="logo"><img src="images/logo.jpg" /></div>


	<div id="headerBarUp"><img src="images/navb script:emoticon('B)',%20'smid_14')Down"><img src="images/navBarBottomBorder.jpg" /></div>
<div id="navBar">
	<img src="images/homeButton.jpg" /><img src="images/biographyButton.jpg" /><img src="images/discographyButton.jpg" /><img src="images/toursButton.jpg" /><img src="images/mediaButton.jpg" />
</div>

<div id="banner"><img src="images/banner.jpg" /></div>
<div id="content"><img src="images/contentPrototype.jpg" /></div>
<div id="sideBarLeft"></div>
<div id="sideBarRight"></div>
</body>
</html>


and then this is the CSS

@charset "utf-8";
/* CSS Document */

#logo {
position:absolute;
top:0px;
left:114px;
width:316px;
height:93px;
}

#banner {
position:absolute;
top:93px;
left:114px;
width:900px;
height:235px;
}

#sideBarLeft{
background-image:url(images/outlineLeft.jpg);
position:absolute;
top:0px;
left:104px;
width:10px;
height:800px;
}

#sideBarRight{
background-image:url(images/outlineRight.jpg);
position:absolute;
top:0px;
left:1014px;
width:10px;
height:800px;
}

#headerBarUp {
  position:absolute;
  top:0px;
  left:430px;
  width: 584px;
  height: 17px;
}

#headerBarDown {
  position:absolute;
  top:77px;
  left:430px;
  width: 584px;
  height: 16px;
}

#navBar {
  position:absolute;
  top:17px;
  left:430px;
  width: 584px;
  height: 60px;
}

#content {
  position:absolute;
  top:328px;
  left:114px;
  width: 900px;
  height: 472px;
}


I had some success of centering the elements properly here and there but no major success

The problem is probably the layout I have designed is too complex for me to center, thats where I need your guys help

and this is how the site looks

http://img442.images.../siteimage.jpg/

This is a project that is given for coursework and Im kinda stuck -_- sucks

Regards,
JkinsonA

This post has been edited by JkinsonA: 19 July 2009 - 02:04 AM

Was This Post Helpful? 0
  • +
  • -

#8 newt  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 25
  • Joined: 06-July 09

Re: DIV tags centering problem

Posted 18 July 2009 - 02:18 PM

Ehhh.. maybe this
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.wrap {
margin: 0 auto;
padding: 0;
width: 920px;
}
#header {
height: 280px;
overflow: hidden;
margin: 0;
padding: 0;
}
#contents {
margin: 0 260px 0 0;
padding: 10px 20px 30px 20px;
}
#sidebar {
float: right;
width: 240px;
margin: 0;
padding: 0 10px;
}
.logo {
border: none;
display: block;
float: left;
}
.topmenu {
background: #121219;
display: block;
float: right;
margin: 0;
padding: 0;
height: 94px;
width: 620px;
}
#banner {
display:block;
float: left;
border: none;
margin: 0;
padding: 0;
}
.topmenu li {
color: #445;
display: inline;
padding: 10px 20px;
}
.clear {
clear: both;
}
-->
</style>
</head>

<body>
<div class="wrap">
  <div id="header"><img src="logo.jpg" width="300" height="94" class="logo" /><ul class="topmenu"><li>one</li>
	<li>two</li>
	<li>etc</li>
  </ul>
	<img src="banner.jpg" width="920" height="186" id="banner" /></div>
  <div id="sidebar">Sidebar</div>
  <div id="contents">Main content</div>
  <br class="clear" />
</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#9 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 36
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Re: DIV tags centering problem

Posted 18 July 2009 - 02:31 PM

Hah! Why not install a template! Freeloading ahoy!
Was This Post Helpful? 0
  • +
  • -

#10 newt  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 25
  • Joined: 06-July 09

Re: DIV tags centering problem

Posted 18 July 2009 - 03:54 PM

Ok, I should have given less code and more guidance.
..didn`t even thank me :crazy:
Was This Post Helpful? 0
  • +
  • -

#11 JkinsonA  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 01-April 09

Re: DIV tags centering problem

Posted 18 July 2009 - 11:59 PM

>___<

ah sorry for that, I went to bed after that hoping Ill get some good input the next morning :D
anyways, thanks alot for the input :D I hope I can manipulate the contents page now ^_^

Regards,
JkinsonA
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1