netaholic
07-19-2006, 09:10 PM
I've decided to ditch table layouts after finding out that div/css is the cleaner way to go.
Anyhow, I'm using this tutorial here
http://www.lissaexplains.com/forum/showthread.php?t=57186
and I'm having some trouble here: http://kbots.org/index2/__index.html
1) I want both of those divs to align under the header image
2) notice how if you stretch/skew the window, the right div collapses, but the left div switches position on the page? how can I make it so that the content is locked and does not move around. Example here: http://www.heartquake.org/
Turquoise
07-19-2006, 09:39 PM
Looks like you need to use position: absolute. You can use this to position the top left corner of your div x pixels from the top and x from the left (alternately, you can use right and/or bottom, but they are not so commonly used).
For example, a div positioned 100 pixels from the top and 50 to the left would be:
#divwhatever {
position: absolute;
top: 100px;
left: 50px;
}
In CSS, something starting with # is a class so you would need to put this in your div html:
<div class="divwhatever">content here</div>
netaholic
07-19-2006, 09:45 PM
hm, it looks like I did use position: absolute.
Here's my code
#header {
margin: 20px;
padding: 10px;
height: 443px;
}
#left {
float: left;
position: absolute;
left: 15px;
top: 443px;
width: 200px;
}
#center {
top: 443;
margin-left: 230px;
margin-right: 15px;
width= 100%;
position: absolute;
}
Turquoise
07-19-2006, 09:47 PM
Thanks, that's helpful - I should have looked at your code beforehand!
What you need to do is take out the "width=100%" which is making the center div go all the way across the page. Use a fixed width instead, like 600px.
netaholic
07-19-2006, 09:51 PM
awesome, now the center div is fixed with respect to the header
however, the left div is fixed with respect to the page, but I want it to be just like the center div and not move over the image. I hope that makes sense...lol!
Turquoise
07-19-2006, 09:54 PM
Ha, I'm so bad at this: I keep missing stuff in your code!
You'll need to take out the float: left on your left column.
Turquoise
07-21-2006, 05:18 PM
Sorry, I seem to have mixed up my ids and my classes!
The code starting with a # is an id, not a class.
Hope that sorts out some of the problems.