aligning tables divs and iframes

[omagic28]

hello everyone

i have a site that uses quite a bit of divs but I designed it with an 800x600 monitor. So i didn't realize until know that if my tables are set to "center" they will adjust to any resolution but my divs won't. Is there a way I can themm to adjust and align themselves with the content of behind them on the tables?
I've never really used iframes so i don't know if they could help. I use divs because i can give them custom image scrollbars and because they're transparent. but if I frames can give the same result and can be aligned with my tables then i'd be happy to learn how to use them. I'm sorry if this seems a little to basic, but I'd really appreciate any help you can give me. Thanks

[digitalentropy]

I'm confused, you have <div> tags over top <table> tags? Can you show your code? Have you thought about using .css to set the locations and alignment?

[omagic28]

Thanks for the quick response. No, I hadn't used css could you give me an example of one that could do that?
the site I'm building is this
www.loscentenarios.com (http://www.loscentenarios.com)
it looks kinda ugly now since I still need to load a lot of content. What I want to do is have all the content appear on the two boxes in the bottom and that they'll realign to the diferent resolutions. thanks again.

[ray326]

Add this style:

#Tabla_01 { margin:0 auto }

[digitalentropy]

You do use style, but instead of being in a .css file you simply put it at the top of the .html.

I must say, <table> isn't the way to handle layout and design. Also, <iframe> isn't the best tag either. <div> tags are definitely the way to go. You can name your <div> using 'id' and then use javascript to hide and show the <div>.

for instance,

<script type="text/javascript">
var divisions = new Array("div_I","div_II","div_III");
function information_div(section) {
for (i=0;i<=2;i++) {
if (section == divisions[i]) {
document.getElementById(section).style.display = 'block';
} else {
document.getElementById(divisions[i]).style.display = 'none';
}
}
}
</script>

<a href="#" onclick="information_div('div_I')">Display div_I</a>
<a href="#" onclick="information_div('div_II')">Display div_II</a>
<a href="#" onclick="information_div('div_III')">Display div_III</a>

<div id="your_first_block">
<div id="div_I" style="display:none">Biography here</div>
<div id="div_II" style="display:none">Photos here</div>
<div id="div_III" style="display:none">Contact information here</div>
</div>

<div id="your_second_block">
you could make another function here to display the photos you offer in the "your_first_block" division above.
</div>