Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Disappearing block

    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?

    Code:
    <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

    Code:
    <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!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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.
    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.

  • Users who have thanked Frankie for this post:

    bm1125 (01-27-2013)

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    You cannot do a float on elements that have position:absolute or position:fixed

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • Users who have thanked COBOLdinosaur for this post:

    bm1125 (01-27-2013)

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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
    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 , 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; }
    Thanks again!!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bm1125 (01-27-2013)

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by bm1125 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by bm1125 View Post
    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
    Code:
    container {
    	width: 800px;
    	margin: 30px auto;
    	margin-top:0;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;

  • Users who have thanked basel51 for this post:

    bm1125 (01-27-2013)

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Or maybe more like this?
    Code:
    #container {
    	width: 800px;
    	margin: 0 auto 30px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bm1125 (01-27-2013)

  • #10
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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

    Here's the code:
    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.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Dec 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Sure, send away!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bm1125 (01-27-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •