• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

How do you position objects in CSS?

Hey,

       I'm fairly new to CSS, and web development in general... and I tried learning what I could from www.w3schools.com, but I'm trying to position values under a tag to the left, right and center... but for some reason its not working out... this is what I have right now:
 
I tried using everything I could find, like position: absolute, and stuff... but nothing worked... and I can't figure out why.

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

body {
  font:12px Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  background-color: #efe5d0;
}

h1, h2, h3, h4, h5, h6 {margin:0; padding: .8em 0 .2em 0;}
h1 { font-size:16pt; }
h2 { font-size:15pt;}
h3 { font-size:14pt;}
h1 { 
   color:white;
   margin: .5em;
}
.content {
  margin: 4em;
  min-width: 600px;
}
p, ul, ol, table {
  margin: .3em 0 .8em 0;
}
table {
  border:#CCCCCC thin solid;
  border-collapse: collapse;
}

td {
  padding: .1em 1em;
  border:1px solid #CCCCCC;
}
.code {
  font-family:"Courier New", Courier, monospace;
}

#banner {
	background-color: #675c47;
	width: 100%;
	height: 100%;
	padding: 15px;
}

#leftbar {
	 background: #efe5d0;
	 float: left;
	 width: 100%;
	 height: 100%;
	 padding: 15px;
}

#rightbar {
	 background: #efe5d0;
         float: right;
         width: 100%;
         height: 100%;
	 padding: 15px;
}

#main{
	background: #efe5d0;
        float: center;
        width: 100%;
        height: 100%;
	padding: 15px;
}

Open in new window


Could you help me out?
0
errang
Asked:
errang
  • 2
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
I've made a working demo with your CSS.  Floats need to be inside a positioned element so I made #main 'position:relative;' and centered it.  If you make both 'leftbar' and 'rightbar' both 100% then they will be in the same place so I got rid of that.  When you do, it 'wraps' around the content.  Most of the time, people put a fixed width for the sidebars.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
@charset "utf-8";
/* CSS Document */

body {
  font:12px Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  background-color: #efe5d0;
}

h1, h2, h3, h4, h5, h6 {margin:0; padding: .8em 0 .2em 0;}
h1 { font-size:16pt; }
h2 { font-size:15pt;}
h3 { font-size:14pt;}
h1 { 
   color:white;
   margin: .5em;
}
.content {
  margin: 4em;
  min-width: 600px;
}
p, ul, ol, table {
  margin: .3em 0 .8em 0;
}
table {
  border:#CCCCCC thin solid;
  border-collapse: collapse;
}

td {
  padding: .1em 1em;
  border:1px solid #CCCCCC;
}
.code {
  font-family:"Courier New", Courier, monospace;
}

#banner {
        background-color: #675c47;
        width: 90%;
        height: 100%;
        padding: 15px;
}

#leftbar {
         background: #efffe0;
         float: left;
         /* width: 100%;
         height: 100%; */
         padding: 15px;
}

#rightbar {
         background: #efffe0;
         float: right;
         /* width: 100%;
         height: 100%; */
         padding: 15px;
}

#main{
				position:relative;
				margin-left:auto;
				margin-right:auto;
        background: #efefef;
        float: none;
        width: 980px;
        height: 100%;
        padding: 15px;
} 
-->
</style>
</head>
<body>

<div id="main">
<center><div id="banner" align="center"><h2>banner</h2></div></center>
<div id="leftbar"><h2>leftbar</h2></div><div id="rightbar"><h2>rightbar</h2></div>
</div>
</body>
</html>

Open in new window

0
 
errangAuthor Commented:
Ah, sweet, thanks!

Is there any way to make the leftbar, main, and right bar mutually exclusive? so they don't run into each other?
0
 
Dave BaldwinFixer of ProblemsCommented:
When you 'float' them, they are independent but it is up to you to make sure they don't overlap.  By the way, you had 'float: center;' for #main and there is no such thing.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now