js/css problem-using the width&height values obtained with js to structure my layout

sanchopansa · #1 (**permalink**) Jul 21st, 2006, 20:13

Hello!

I'm a beginner so please excuse me if I'm asking a dumn question.
I have the following problem- I have obtained the width&height values of an image with js and now I want to use them to structure the rest of my layout.
How can this be done?
Here is my source in case it could be of help to you. I want to assign the obtained w&h to the w&h of the div#container, div#footer, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 1</title>
<script language="javascript" type="text/javascript">
function getImageWidth()
{
return document.getElementById("image_1").width;
}
function getImageHeight()
{
return document.getElementById("image_1").height;
}
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html,body
{
margin:0.5% 0.5% 0.5% 0.5%;
padding:0;
display:inline-block;
}

body
{
font: 76% arial,sans-serif;
}

div#header h1
{
height:80px;
line-height:80px;
margin-bottom:0.5%;
padding-left:10px;
background-color:#ff9999;
width:
}

div#container
{
width:100%;
}

div#content
{
float:left;
margin-bottom:0.5%;
background-color:#00ccff;
}

div#news
{
float:left;
width:25%; /*i can't remove this width because the section positions itself below the content*/
margin-left:-25%;
background:#0099cc;
height:
}

div#footer
{
clear:left;
margin-top:0.5%;
background-color:#ba3f3f;
width:
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<img src="images/1.jpg" alt="" id="image_1" />
</div>
<div id="news">
<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>

Thanks for your time,
Valentin

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Box of auto width and height?	Bolt	Web Page Design	2	Apr 14th, 2008 08:20
Tables with 100% width and height	Griff	Web Page Design	13	Feb 5th, 2008 07:22
floating a div across the whole width and height of a table cell	cosmicbdog	Web Page Design	3	Feb 1st, 2008 14:26
Pictures disappearing with correct width and height!	ChrisTheSoul	Web Page Design	3	Sep 3rd, 2007 21:56
Trouble with form controls. Height, width and all that	magnetica	Web Page Design	7	Aug 10th, 2007 12:47

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
js/css problem-using the width&height values obtained with js to structure my layout