Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do you position objects in CSS?

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

670 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