Forum Moderators: not2easy
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 900px;
padding: 0;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
}
body {
background-color: #333333;
padding: 0;
margin: 0;
text-align: center;
}
#columncontainer {
margin-top: 25px;
padding: 0;
}
h1 {
margin: 0px;
padding: 0;
}
#columncenter {
padding:0px;
text-align: center;
margin-left: 167px;
margin-right: 167px;
}
#columnleft {
float: left;
padding:0px;
}
#columnright {
float: right;
padding:0px;
}
#columnright ul{
list-style-type:none;
margin: 0;
padding: 0 0 0 0;
}
#columnright ul li {
display: block;
}
#columnleft ul{
list-style-type:none;
margin: 0;
padding: 0 0 0 0;
font-family: Arial, Helvetica, sans-serif;
color: #999999;
line-height: 13pt;
font-size: 10px;
}
#columnleft ul li{
display: block;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
------HTML-------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="klmain_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="clearfloat" id="columncontainer">
<div id="columnleft">
<ul>
<li class="active"><a href="index.html">HOME</a></li>
<li class="active"><a href="about.html">ABOUT</a></li>
<li class="active"><a href="services.html">SERVICES</a></li>
<li class="active"><a href="portfolio.html">PORTFOLIO</a></li>
<li class="active"><a href="contact.html">CONTACT</a></li>
</ul></div>
<div id="columncenter"><img src="images/logo.jpg" width="326" height="83" /></div>
<div id="columnright">
<ul>
<li><img src="images/lightcampus.jpg" /></li>
<li><img src="images/lightcampus.jpg" /></li>
<li><img src="images/lightcampus.jpg" /></li>
</ul>
</div>
</div> <!--/*header*/-->
</div> <!--/*container*/-->
<br class="clearfloat" /> <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats? -->
</body>
</html>
*I'm still a noob so bear with me*
in your html, you have the order of columns:
left
center
right
In your CSS, you float left left and you float right right. And leave center in the main flow (which is good, but won't work with that order of content in the source.
Either you set the to be floated elements first in the html, or either you float the left and the center column to the left (the right can remain in the flow if you choose to do so)
The clearfloat you have there, it's also applied to #columncontainer, why ?
Clearing a float is basically telling the element to go sit under the floats.
It's used to stretch a parent so it envelops the floated children it has, as such I think your clering element needs to be in your container, not below it.
You seem to have a lot of padding and margins set to zero. While I'm confident not all of them are actually doing anything, I find it much more comfortable to reset the browser default is one go by using e.g.:
* {
padding:0;
margin:0;
}
As for naming ids and classes: I find it easier to use names like menu, advertising etc. instead of left and right. It becomes quite silly and confusing if you at some point decide to swap things about and have the ads were the menu once was.
"...either you float the left and the center column to the left (the right can remain in the flow if you choose to do so"
--I tried this and it seems to work, I just have to manually set the center column to the dead center(its important to the design).
"The clearfloat you have there, it's also applied to #columncontainer, why ?"
--When I said 'noob' I meant it. :) I kept it there because the right column list puts spaces between the items for some reason and the float kept it intact. Any idea why the right column list breaks apart?
"Clearing a float is basically telling the element to go sit under the floats.
It's used to stretch a parent so it envelops the floated children it has, as such I think your clering element needs to be in your container, not below it."
--I think i'd have to see it to understand it. This is my first div layout and before that I didnt have much experience developing websites. Thanks for the info I'll learn eventually.
" * { padding:0; margin:0; } "
--Good tip! thanks! I removed the unnecessary tags.
My main remaining question is why does my right column list put spaces between the images.
"Either you set the to be floated elements first in the html..."
--I'm not quite sure what this means. Could you explain a little further? First before what?
Think of floats like they are <img> with align="left" or right on them. They stey in the vertical sense were they used to be in the text, but move to the left or right and push away any text that was there.
If you have your images near the end of the paragraph, they'll not make it up high enough to be next to the first line of text you have.
CSS floats are different, but not that much. and the basic way is still like that.
To make it easy, you can change the order in your html:
- first both the things that need to be floated (left and right, order hardly makes a difference) [Some doing SEO might loose their meal over something like this, but it does make sense]
- next the center that will flow between the floats.
The spaces on your images: images are inline elements by default, they sit on the baseline that allows for descenders such as "ygj" etc.
To make it easy, you can change the order in your html:
- first both the things that need to be floated (left and right, order hardly makes a difference) [Some doing SEO might loose their meal over something like this, but it does make sense]
- next the center that will flow between the floats.
The spaces on your images: images are inline elements by default, they sit on the baseline that allows for descenders such as "ygj" etc.
--Is there a way to remove the default baseline for images?
