Need help with div layers

1

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.

2

can you post an example?

3

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

4

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)


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:


<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>
5

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):

 
<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 include("$action2.php");?>
Copyright © 1967 - 2004 Cal Brunen Inc, design © LeafyCorp, all rights served. 
 
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;
}

 
 
thanks.
6

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 :slight_smile:

BTW, nice layout ! :thumb:

7

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.

8

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

9

position:relative;
left:200px;

For an offset of 200 pixels :slight_smile:

10

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

11

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

12

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

13

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.

14

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

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

sorry. and thanks lol.