...

View Full Version : Disappearing block



bm1125
01-26-2013, 06:43 PM
Hello,

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 style="width:320px;display:block;position:absolute;">
<div style="width:160px;float:left;display:block;position:absolute;">
<a href="part_time.html">part time jobs</a></br>
<a href="">weekend jobs</a></br>
<a href="">work at home</a></br>
<a href="">insurance jobs</a></br>
<a href="">administrative jobs</a></br>
<a href="">sales job</a></br>
<a href="">constructive jobs</a></br><br>
</div>
<div style="width:160px;float:right;display:block;position:absolute;">
<a href="">jobs in california</a></br>
<a href="">jobs austin, tx</a></br>
<a href="">$100K+ jobs</a></br>
<a href="">public sector jobs</a></br>
<a href="">government job</a></br>
<a href="">college jobs</a>
</div>
</div>


and this is what blocking them



<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; }




thanks!

Frankie
01-26-2013, 06:55 PM
Hey there,

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.

COBOLdinosaur
01-26-2013, 08:57 PM
You cannot do a float on elements that have position:absolute or position:fixed

Cd&

bm1125
01-27-2013, 05:06 PM
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.

I've changed it and now this is the code

<div style="width:320px;">
<div style="width:159px;">
<a href="part_time.html">part time jobs</a></br>
<a href="">weekend jobs</a></br>
<a href="">work at home</a></br>
<a href="">insurance jobs</a></br>
<a href="">administrative jobs</a></br>
<a href="">sales job</a></br>
<a href="">constructive jobs</a></br><br>
</div>
<div style="width:159px;display:inline;">
<a href="">jobs in california</a></br>
<a href="">jobs austin, tx</a></br>
<a href="">$100K+ jobs</a></br>
<a href="">public sector jobs</a></br>
<a href="">government job</a></br>
<a href="">college jobs</a>
</div>
</div>

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 (http://‬jobs.onmobile.us/3/) , 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:



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; }


Thanks again!!

Excavator
01-27-2013, 07:27 PM
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 -
<!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>

bm1125
01-27-2013, 08:11 PM
Excavator YOU ARE AWESOME!! MUCH THANKS :)

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?

Excavator
01-27-2013, 08:45 PM
Excavator YOU ARE AWESOME!! MUCH THANKS :)

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.

basel51
01-27-2013, 08:48 PM
Excavator YOU ARE AWESOME!! MUCH THANKS :)

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?


just make your style for container

container {
width: 800px;
margin: 30px auto;
margin-top:0;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;

Excavator
01-27-2013, 08:58 PM
Or maybe more like this?

#container {
width: 800px;
margin: 0 auto 30px;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}

bm1125
01-27-2013, 09:12 PM
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).

You can see it here (http://‬jobs.onmobile.us/3)

Here's the code:

body,html { margin:0 auto;padding:0 auto;font-family:Trebuchet MS, Arial, Helvetica, sans-serif; }
#main { font-family:Trebuchet MS;font-size:18px;margin:0;padding:0; }
#main h2 { font-size:22px;font-weight:bold;font-family:Trebuchet MS; }
#home_page {width: 320px;margin-left:auto;margin-right:auto;margin-top:0;padding-top:0;}
#menu { width:320px;margin:0;padding:0; }
#menu ul {list-style: none;width:320px;margin:0;padding:0;}
#menu 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;
}
#menu li a:hover {background-color: #79c4fb;color: #FFFFFF;}
#menu li a:link,
#menu li a:visited {font-size: 100%;display: block;padding: 0.6em 0.6em 0.6em 0.6em;color: #FFFFFF;text-decoration: none;margin:0;padding:0;}


<body>
<div id="home_page">
<div id="menu">
<!-- Menu starts here /--->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- Menu ends here --->
</div>


I've tried to remove the home_page & the 'menu' div but still have this gap.

Excavator
01-27-2013, 09:27 PM
No gap in the code you've provided.

Are you using a DocType?
Are you seeing a cached version?

Link us to the test site so we can see it in action.

bm1125
01-27-2013, 09:31 PM
here's the link
http://jobs.onmobile.us/3/

I checked on mozilla, chrome, IE, also on BB, iPhone & Galaxy (site is targeted for mobile users) and I see this gap all the time.

bm1125
01-27-2013, 10:01 PM
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?

Excavator
01-27-2013, 10:12 PM
Sure, send away!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum