Right, posting here is my last resort to figuring out this problem, so if anyone can help then i'd be more than grateful. Smile
This isn't happening in Internet explorer.
So, the problem is that i've created a basic layout and all works fine until i place an image(any sized image) inside the content div in the main column(<div id="main"></div>), which then decides to stretch it out and push the right handside column(<div id="col2"></div>) down to the bottom. Haven't a clue why it's doing this or how to prevent it. Where am i going wrong?
p.s apologies for the sloppy coding, haven't got round to tidying or finishing it off yet
PHP Code:
[B]index.html[/B]
<html>
<head>
<title>untitled</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="col1">
<div id="head"><span class="headtitle">logo</span>
</div><!-- head -->
<div id="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Digital Art</a></li>
</ul>
</div><!-- links -->
</div><!-- col1 -->
<div id="page">
<div id="top"> </div>
<div id="mid">
<div id="header">
<div id="yo">
Home
</div><!-- yo -->
</div><!-- header -->
<div id="main">
<div id="content">
At precisely 1700 yesterday on the east coast of west Britain came a large viking motor cycle. Reports have not yet indicated where this Norweigen Viking Motor cycle that departed from the north of Italy had come from. West cheshire police have been called in to investiage and are linking with the new theories of Russians evolving into gigantic man beasts who are out to eat our tiny little island.
</div><!-- content -->
</div><!-- main -->
<div id="col2">
<div id="yo">
<span id="spin">oh noes another column lets see if we can eat it perhaps nah i dont think so</span>
</div><!-- yo -->
</div><!-- col2 -->
</div><!-- mid -->
<div id="bot">website designed and implemented by your grandma<br />all content copyrighted by the batchelors butter cast
</div><!-- bot -->
</div><!-- page -->
</body>
</html>
style.css
PHP Code:
body {
padding: 0px;
margin: 0px;
margin-right: 20%;
margin-left: 20%;
font-family: Helvetica;
font-size: 12;
background-color: #343434;
}
#head {
color: #fff;
padding: 20px;
background: #97C99B;
border-left: 3px solid #e9e9e9;
}
.headtitle {
font-size: 34px;
}
#top {
border-right: 3px solid #e9e9e9;
border-left: 3px solid #e9e9e9;
color: #ffffff;
font-size: 18px;
padding: 5px;
background-color: #3D769A;
}
#bot {
border-right: 3px solid #e9e9e9;
border-left: 3px solid #e9e9e9;
color: #fff;
padding: 15px;
background-color: #3D769A;
clear: both;
}
#col1 {
float: left;
width: 20%;
background-color: #f7f7f7;
}
#page {
float: right;
width: 80%;
}
#mid {
float: right;
border-left: 3px solid #e9e9e9;
border-right: 3px solid #e9e9e9;
background-color: #fff;
}
#main {
float: left;
width: 80%;
border: 0px solid #000;
}
#footer {
clear: both;
border: 0px solid #000;
}
#col2 {
width: 20%;
float: right;
border: 0px solid #000;
}
#yo {
padding: 10px;
}
#header {
border-bottom: 1px dotted #a6a6a6;
background-color: #fbfbfb;
line-height: 1px;
border-top: 3px solid #e9e9e9;
margin-right: 0px;
padding-right: 0px;
}
*html #header {
border-bottom: none;
background: url(css.gif) repeat-x bottom;
}
#content {
padding: 20px;
margin: 3px;
border-right: 1px dotted #a6a6a6;
min-width: 10px;
}
*html #content {
border-right: none;
background: url(css.gif) repeat-y right;
}
#links {
border-top: 3px solid #e9e9e9;
line-height: 3em;
background: url(back.jpg) repeat-x bottom left;
padding: 10px;
padding-bottom: 10px;
}
#spin {
text-align: right;
padding: 4px;
}
h1 {
border-bottom: 1px solid #dedede;
}
#links ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#links li {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: #000;
border-left: 15px solid #3D769A;
padding-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
}
a:hover {
color: #000;
border-left: 15px solid #97C99B;
border-bottom: 1px solid #97C99B;
}
Thanks for any help. |
