Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do you position objects in CSS?

Posted on 2011-03-06
3
Medium Priority
?
249 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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 84

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

916 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