Hi everyone,
Im hoping you can solve a problem thats got me stumped for days now
Here is the link to my site
<!-- m --><a class="postlink" href="http://www.juiceoftheday.com/webform3.html">http://www.juiceoftheday.com/webform3.html</a><!-- m -->
Ultimatly what Id like is for the blogitem divs to always be the hight of the graphic unless theres a huge amount of text, in that case then it should start growing. The blogitem div should also be able to strech out to the left border of the right menu div...sounds easy but ive been toying for days and cant get it right on either FF or IE
If you look at the second blogitem div, this is what happened when i tried to fix the problem, why does the div expand to the length of the right menu for?
I dont mean to sound greedy here, but when this page is viewed in IE and the window is resized, some of the border disappears...another problem.
Id appreciate if someone could spare a few seconds to even suggest something that might get me on the right track.
MUCHO THANKSTry this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
border: 1px solid #F60;
margin: 5px;
padding: 5px;
}
.rightMenu {
background-color: #CFC;
border: 1px solid #060;
float: right;
height: 500px;
width: 200px;
}
.blogItem {
border: 1px solid #F60;
margin-right: 210px;
padding: 0 5px 5px 5px;
min-height:128px;
}
.delicious {background:url(imgs/delicious.gif) no-repeat #FFFFCC; background-position: 3px; display:block; text-align:center; width:150px; height:25px; border: solid #FF6600 1px;}
</style>
</head>
<body>
<div id="container">
<div class="rightMenu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">View All Posts</a>
</div>
<div class="blogItem">
<img align="left" src=http://www.webdeveloper.com/forum/archive/index.php/"imgs/blogpost.png">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><h3>Login</h3></a>
<p>Login to your account</p>
<div style="float:right;">
<a class="delicious" href=http://www.webdeveloper.com/forum/archive/index.php/"#">delicious</a>
</div>
</div>
<div class="blogItem">
<img align="left" src=http://www.webdeveloper.com/forum/archive/index.php/"imgs/blogpost.png">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><h3>Login</h3></a>
<p>Login to your account</p>
<div style="float:right;">
<a class="delicious" href=http://www.webdeveloper.com/forum/archive/index.php/"#">delicious</a>
</div>
<div style="clear:both;padding:1px;"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Im hoping you can solve a problem thats got me stumped for days now
Here is the link to my site
<!-- m --><a class="postlink" href="http://www.juiceoftheday.com/webform3.html">http://www.juiceoftheday.com/webform3.html</a><!-- m -->
Ultimatly what Id like is for the blogitem divs to always be the hight of the graphic unless theres a huge amount of text, in that case then it should start growing. The blogitem div should also be able to strech out to the left border of the right menu div...sounds easy but ive been toying for days and cant get it right on either FF or IE
If you look at the second blogitem div, this is what happened when i tried to fix the problem, why does the div expand to the length of the right menu for?
I dont mean to sound greedy here, but when this page is viewed in IE and the window is resized, some of the border disappears...another problem.
Id appreciate if someone could spare a few seconds to even suggest something that might get me on the right track.
MUCHO THANKSTry this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
border: 1px solid #F60;
margin: 5px;
padding: 5px;
}
.rightMenu {
background-color: #CFC;
border: 1px solid #060;
float: right;
height: 500px;
width: 200px;
}
.blogItem {
border: 1px solid #F60;
margin-right: 210px;
padding: 0 5px 5px 5px;
min-height:128px;
}
.delicious {background:url(imgs/delicious.gif) no-repeat #FFFFCC; background-position: 3px; display:block; text-align:center; width:150px; height:25px; border: solid #FF6600 1px;}
</style>
</head>
<body>
<div id="container">
<div class="rightMenu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">View All Posts</a>
</div>
<div class="blogItem">
<img align="left" src=http://www.webdeveloper.com/forum/archive/index.php/"imgs/blogpost.png">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><h3>Login</h3></a>
<p>Login to your account</p>
<div style="float:right;">
<a class="delicious" href=http://www.webdeveloper.com/forum/archive/index.php/"#">delicious</a>
</div>
</div>
<div class="blogItem">
<img align="left" src=http://www.webdeveloper.com/forum/archive/index.php/"imgs/blogpost.png">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><h3>Login</h3></a>
<p>Login to your account</p>
<div style="float:right;">
<a class="delicious" href=http://www.webdeveloper.com/forum/archive/index.php/"#">delicious</a>
</div>
<div style="clear:both;padding:1px;"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>