Solved

How do you position objects in CSS?

Posted on 2011-03-06
3
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 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