I have created two div's for two columns but for some reason they just disappear everytime I use float:right and float:left. The other div's is on top of them and i'm not sure what is wrong?
<div id="articles">
<div id="latest">Latest articles</div>
<ul>
<li>
<a href="how-to-apply-for-job.html"><div id="desc"><b>How to apply for a job</b></br><span id="date">Monday, December 3rd, 2012</span></br>
When you find a job that interests you and where you have potency to show your experience and skill...</div></a>
</li>
<li>
<a href="job-searching-tips.html"><div id="desc"><b>Job searching tips</b></br><span id="date">Wednesday, November 28th, 2012</span></br>
Job searching, when you are looking for a job the tackle you need to make your search successful includes how to...</div></a>
</li>
<li>
<a href="how-to-get-job.html"><div id="desc"><b>How to get a job</b></br><span id="date">Friday, November 2nd, 2012</span></br>
Getting a job in this present economy may not be that easy, the recession period created many...</div></a>
</li>
</ul>
</div>
CSS code:
#articles { position:relative; }
#articles ul { list-style:none;margin:0;padding:0; }
#articles li { background-color:#eeeeee;margin:auto;padding:auto;display:block; }
#articles li a { text-decoration:none;background-color:#eeeeee;display:block; }
#articles li a:hover { background-color:#ffffff; }
#articles li a:visiter { background-color:#eeeeee;text-decoration:none; }
Elements with position:absolute are taken out of the flow as it is called: for the next elements, they don't exist. For more information, see the CSS positioning tutorial linked from my signature.
__________________ Frank
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
Thanks much both of you. Frankie I read your tuts and from what I understand I needed to use display inline but still couldn't make it work. I mean, I can see now the list but cannot make it into two columns.
The only way I could create two columns is by using float. I was thinking of using table?
Also, I have a problem you can see here , as you can see there's a gap I coudln't remove before the blue menu, tried to place everywhere i could margin:0; but it didn't work.
Here's the css:
Code:
body { margin:0 auto;padding:0 auto; }
#navigation { width:320px;margin:0;padding:0; }
#navigation ul {list-style: none;margin:0;padding: 0;width:320px;margin:0;padding:0;}
#navigation li {line-height:55px;float:left;font-family:Trebuchet MS;background-color:#0066cc;text-align:center;width:79px;margin:0 1px 0 0px;padding:0;}
#home_page {width: 320px;margin-top:0px;padding-top:0px;margin-left:auto;margin-right:auto;}
#main { font-family:Trebuchet MS;font-size:18px;margin:0; }
Hello bm1125,
Float is what you want to use to make your columns. Float is how we put elements beside each other.
Look at it this way once -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
font: 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container {
width: 800px;
margin: 30px auto;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
ul.navigation {
margin: 20px 0 0 20px;
padding: 0;
float: left;
list-style: none;
}
ul.navigation li {
line-height: 55px;
margin: 0;
padding: 0 10px;
background: #0066cc;
text-align: center;
}
ul.navigation li a:link,
ul.navigation li a:visited {
display: block;
color: #00f;
}
ul.navigation li a:hover,
ul.navigation li a:active {color: #f00;}
#articles {
padding: 20px;
clear: both;
background: #eee;
}
#articles a:link {
text-decoration: none;
background: #eee;
display: block;
}
#articles a:visited {background: #eee;}
#articles a:hover {background: #fff;}
</style>
</head>
<body>
<div id="container">
<ul class="navigation">
<li><a href="part_time.html">part time jobs</a></li>
<li><a href="">weekend jobs</a></li>
<li><a href="">work at home</a></li>
<li><a href="">insurance jobs</a></li>
<li><a href="">administrative jobs</a></li>
<li><a href="">sales job</a></li>
<li><a href="">constructive jobs</a></li>
</ul>
<ul class="navigation">
<li><a href="">jobs in california</a></li>
<li><a href="">jobs austin, tx</a></li>
<li><a href="">$100K+ jobs</a></li>
<li><a href="">public sector jobs</a></li>
<li><a href="">government job</a></li>
<li><a href="">college jobs</a></li>
</ul>
<div id="articles">
<h1 id="latest">Latest articles</h1>
<p>
<a href="how-to-apply-for-job.html">How to apply for a job</a><br /><span class="date">Monday, December 3rd, 2012</span><br />
When you find a job that interests you and where you have potency to show your experience and skill...
</p>
<p>
<a href="job-searching-tips.html">Job searching tips</a><br /><span class="date">Wednesday, November 28th, 2012</span><br />
Job searching, when you are looking for a job the tackle you need to make your search successful includes how to...
</p>
<p>
<a href="how-to-get-job.html">How to get a job</a><br /><span class="date">Friday, November 2nd, 2012</span><br />
Getting a job in this present economy may not be that easy, the recession period created many...
</p>
<!--end articles--></div>
<!--end container--></div>
</body>
</html>
One last problem, I have a small gap on top of the page before the menu begins. I placed margin & padding 0 everywhere I needed to but couldn't remove it even with ur code. any ideas?
One last problem, I have a small gap on top of the page before the menu begins. I placed margin & padding 0 everywhere I needed to but couldn't remove it even with ur code. any ideas?
Let's see the most current version of your code. I'm not sure what gap you're talking about.
One last problem, I have a small gap on top of the page before the menu begins. I placed margin & padding 0 everywhere I needed to but couldn't remove it even with ur code. any ideas?
Thanks again for your patience and willing to help.
I don't think the container is the problem because it's in the middle of the page and the gap is on top of the page before the blue menu (where there are Home Jobs articles & conatct button).
Hi Excavator, I sent msg half an hour ago but for some reason I can not see it. Maybe got rejected because I posted my link. Mind if I will send u link on private message?
Before you post, read our: 
