<div> tag not lining up next to eachother

Hi,

I'm trying to edit this website, and I've looked up online tutorials, and have been trying to create a 2 column layout. I was looking at several websites, and it seemed to me that if I have two <div> tag and use css to put them to left and right, they will appear alongside each other as shown in this website: http://www.barelyfitz.com/screencast/html-training/css/positioning/.

My problem is that no matter what I do, the left navigation bar that I made and the content column will never appear side by side, the content colum will always appear at the bottom.

What can I do to fix this?

the code looks like this:


<div class"acctbody">
<div class="cpn">
<ul class="cp_nav">
<li><a href="page1.php">page 1</a></li>
<li><a href="page2.php">page 2</a></li>
</ul>
</div>
<div class="cpc">
content...
</div>
</div>


and the css looks like this


.acctbody{
text-align:center;
padding:3%;
background-color:#ffffff;
}

.cpn{

position: relative;
width : 180px;
left: 0;
margin-left : 1px;
margin-top : 1px;
color : #000000;
padding : 0;

}

.cpn ul {margin:0px; padding:0px;}
.cpn li {list-style: none;}
ul.cp_nav {background:#666;}
ul.cp_nav li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}

.cpn a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}


.cpc{
position:relative;
top:1px;
right: 0;
bottom: 250px;
width:200px;
background-color : #0ffff0;

}

positioning is not what you want to use for a column layout.


.clear { clear: both; }

.cpn {
width: 180px;
float: left;
}

.cpc {
width: 200px;
float: left;
}



<div class="acctbody">
<div class="cpn"></div>
<div class="cpc"></div>
<div class="clear"></div>
</div>



<div> is display: block; which means it will take up the entire width. all elements below it cannot go next to it because there is not room

-----------------------
div
-----------------------
-----
span
-----
-----------------------
p
-----------------------

div, p, h1, h2, h3, h4 and most tags are display: block; which means they will fill the width, leaving no room for content below them to come up. span, a, input, img are display: inline; which means they do not fill the width. they only fill the width they take up. in this case, we are floating the <div> to the left, which makes it only take up the space it needs. then we are floating the next one to the left, so that it only takes what it needs. finally we added a clear, so that everything below them will STAY below them.

Okay,

so I tried both ways. The first thing I tried was to remove the positioning in the css, and made them float to the left. The problem with this is that it goes outside of the <div> block that it is nested in and it doesn't look nice.

So the second thing I did was to use span instead of div for the navigation bar and the content. What happened here was the navigation bar took up the entire width of the page, and when I specified the width in css, it didn't make it smaller.

I'm not sure what is wrong...

Thanks for the help so far!

you cant define a width to an inline element try posting your full code so i can see the problem. if this is your full code (including doctype), ill take another look at it. or better yet, upload it to a server so i can see a live view of the problem.

for your example: isn't this what you wanted?

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-60.png

Ah, I figured out what I was doing wrong.

I had forgotten to add the <div style="clear:both;">
I'm not sure why that fixes the problem, but it contained the other <div> in the container that it was supposed to be kept in!

Thanks a lot for your help!
I looked around at many tutorials online and spent hours on this problem... I was so frustrated, and my internet went down right when I posted last...

Thanks again! :)

when you float an element, it loses its place on the page, so everything underneath it comes creeping up. clearining a float will give its place back on the page. sometimes you actually dont want to clear a float (more commonly seen in position: absolute; though). floating and position: absolute; both take an element out of the flow of the page

Ah, I think I get it. So that extra <div> was added as an anchor kind of a thing for the parent <div>.

correct. you can also just set a height to the parent. the children of it will not have a space on the page (since you floated it) however the parent will push the content down. both ways are correct methods (height and clearing) which one to use in certain situations is based on one's opinion.

however, clearing in my opinion is for things that don't necesarrily have a height (content that is increasing regularly - prevelant on social websites, blogs, any user-inputted stuff). so I typically only use clear when i have to (when a height cannot be defined)