# Need help with div layers

**URL:** <https://forum.kirupa.com/t/need-help-with-div-layers/61384>\
**Category:** web dev\
**Created:** [August 18, 2004, 3:33am UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384 "2004-08-18T03:33:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![leafy](https://avatars.discourse-cdn.com/v4/letter/l/a9a28c/32.png) [@leafy](https://forum.kirupa.com/u/leafy)\
**Post date:** [August 18, 2004, 3:33am UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/1 "2004-08-18T03:33:07Z")

</div>

Hi,

I have been using div layers for a site layout, and i’ve been controlling the div layouts through css. unfortunately, i have a problem.

I have two div layers, one is the main content and the other is the sidebar. The main content is set to float:left; while the sidebar is set to position:relative;. Depending on whether i put the content or sidebar first, one is always at the top and the other is diagnally right beneath it. What i’m trying to do is to get them both on the same level.

Please tell me if you need any more information to help solve this problem.  
Thanks in advance to those who try to help me.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 12:23pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/2 "2004-08-18T12:23:21Z")

</div>

can you post an example?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 2:27pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/3 "2004-08-18T14:27:34Z")

</div>

![](http://www.calbruneninc.com/helpdiv.jpg)

does that help? or did you mean the actual coding?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 6:22pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/4 "2004-08-18T18:22:09Z")

</div>

Try compressing the html and or posting it so we can look at the source ourselves, that way we can trouble shoot it. However this should solve your problem:

I’m gonna label the classes of your your left section .left and right .right (obviously)

```php

body {
	margin: 0px;
}
.left {
	background-color: #333333;
	float: left;
	height: 500px;
	width: 100px;
	position: relative;
}
.right {
	background-color: #666666;
	float: left;
	height: 500px;
	width: 200px;
	position: relative;

}

```

Notice how the float and the positioning are the same on both DIVs. And depending on which one you put first, depends on which is on left, and which is on right. Hope this helps.

EDIT:  
In case it doesn’t here is the coding I used:

```auto

<style type="text/css">
<!--
body {
	margin: 0px;
}
.left {
	background-color: #333333;
	float: left;
	height: 500px;
	width: 100px;
	position: relative;
}
.right {
	background-color: #666666;
	position: relative;
	height: 500px;
	width: 200px;
	float: left;
}
-->
</style>
</head>

<body>
<div class="left"></div>
<div class="right"></div>
</body>

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 7:00pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/5 "2004-08-18T19:00:27Z")

</div>

i’m not sure your way looks but before i say anything take a look at my codes:

this is on my index page (the actual content):

````auto
 
<table height="100%" width="50%" bgcolor="white" border="0" cellspacing="0" cellpadding="0" style="BORDER:1px SOLID #000000">
<tr><td>
<div id="container">

```php
<?php include("menu.php");?>

````

 ![]() **User Settings**  
  
  
  ![]()Add to Favorites?  
 ![]() Print This Page  
  

![]() **Search the page!**

  
  
 ![]() people are browsing this site!

```php
<?php include("$action2.php");?>

```

 Copyright © 1967 - 2004 **Cal Brunen Inc** , design © [LeafyCorp](http://www.bitter-rain.net/evenstar/lc), all rights served.

```auto
 
and this is my style css:
 

```

#content {  
float: left;  
margin: 24px 0 0 0;  
padding: 0 20px;  
width: 350px; /\* for IE5/Win \*/  
voice-family: “”}"";  
voice-family: inherit;  
width: 350px;  
}

#sidebar {  
position: relative;  
font-size: 90%;  
line-height: 1.5em;  
margin: 0 0 0 509px;  
padding: 60px 15px 0 20px;  
color: #937966;  
border-left: 1px solid #ddd;  
}

```auto
 
 
thanks.
```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 7:02pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/6 "2004-08-18T19:02:16Z")

</div>

I know that problem. I had it too when creating my site (it also uses two divs next to eachother). I positioned the left div absolute, and the right div relative with a left offset. If anyone has a better solution, I’d love to hear it 🙂

BTW, nice layout ! :thumb:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 18, 2004, 8:12pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/7 "2004-08-18T20:12:48Z")

</div>

Make your #content and #sidebar, float: left, add position:relative. Like my above example. Of course that’s only if you’re set on keeping them floating. However it, it could be hard to put content in them while they are floating. If you do like Voet does, which would be more efficent, it would be easier to position some objects. Either way works… one is just a little harder to control.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 5:19am UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/8 "2004-08-19T05:19:20Z")

</div>

thanks a lot! but one more question - how do you create a left offset?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 9:41am UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/9 "2004-08-19T09:41:01Z")

</div>

position:relative;  
left:200px;

For an offset of 200 pixels 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 3:06pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/10 "2004-08-19T15:06:38Z")

</div>

ok thanks, but its in a table - so that i get the black border around everything and a white background - will that affect it?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 3:39pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/11 "2004-08-19T15:39:27Z")

</div>

With tables you should be able to get the layout you want - because with tables you can have cells next to each other.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 3:49pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/12 "2004-08-19T15:49:38Z")

</div>

Not sure if this will help, but… [http://glish.com/css/9.asp](http://glish.com/css/9.asp)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 19, 2004, 4:03pm UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/13 "2004-08-19T16:03:23Z")

</div>

Well w/ tables act the same as divs. when it comes to CSS positioning, and styling. so yea you can add whatever you want to the table.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 20, 2004, 1:18am UTC](https://forum.kirupa.com/t/need-help-with-div-layers/61384/14 "2004-08-20T01:18:19Z")

</div>

the div problem is sort of solved - meaning i got the two to stay next to each other - but another two problems popped up. First off, the content now likes to extend beyond the table i have. second, the footer is like an inch before the end of the table.

i think it would be easier if you just saw the site itself so i’m giving you the URL  
[http://calbruneninc.com](http://calbruneninc.com)

if you go to some of the other pages (except testimonials) you’ll see how the content overrides the table.

sorry. and thanks lol.