Basic CSS/HTML Help

Assgoblin posted this at 00:05 — 11th November 2005.

Joined: Oct 2005

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(), which then decides to stretch it out and push the right handside column() 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
<strong>index.html</strong>
<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\">&nbsp;</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
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.

demonhale posted this at 02:58 — 11th November 2005.

He has: 3,278 posts

Joined: May 2005

It would be great if you provided a link to see what happens... But heres what I see at first glance... Your "main" div is floated left and is at 80% and the "col2" is floated right at 20%.... If they are supposed to be together as just a two column layout then "col2" should be floated left too to prevent pushing it... Or the one located at the left should have fixed width....

Also (hard to say this but) you could wrap them inside a two column table to prevent it from pushing down...