Solved

How do you position objects in CSS?

Posted on 2011-03-06
3
243 Views
Last Modified: 2012-05-11
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
Comment
Question by:errang
  • 2
3 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35053115
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
 

Author Closing Comment

by:errang
ID: 35053445
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35053917
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question