Results 1 to 9 of 9
  1. #1
    Join Date
    May 2006
    Location
    Gary, IN
    Posts
    208

    Unhappy I need some quick div help!

    I'm coding a layout and I ran into a little trouble hopefully someone could help me out.

    Code:
    #design {
    	background: transparent;
    	width: 1059px;
    }
    #example {
    	display:block;
    	position: absolute;
    	background: transparent url(images/example.png);
    	height: 217px;
    	width: 589px;
    }
    #latest {
    	float: right;
    	background: transparent url(images/latest.png) no-repeat;
    	height: 28px;
    	width: 470px;
    	padding-top: 10px;
    }
    .latesttext {
    	font: 11px Tahoma, Geneva, sans-serif;
    	color: #4e4e4e;
    	padding-left: 215px;
    }
    #client {
    	float: right;
    	background: transparent url(images/client.png) no-repeat;
    	height: 46px;
    	width: 470px;
    	margin-top: 40px;
    }
    HTML Code:
    <div id="design">
        	<div id="example">
            </div>
            <div id="latest">
            	<span class="latesttext">LATEST PROJECT 5.22.09</span>
            </div>
            <div id="client">
            </div>
        </div>
    Alright now what I'm trying to do is get the div client to stack under the div latest which is to the right of the example div.

    The code I used aligns the div example and div latest perfectly but I cant get the div client to show up at all.

  2. #2
    Join Date
    Oct 2002
    Location
    State of Disbelief
    Posts
    22,951
    Moved from programming.
    Having problems, or maybe questions about WHT? Head over to the help desk!

  3. #3
    Join Date
    May 2006
    Location
    Gary, IN
    Posts
    208
    Sorry about that. Thanks for moving though.

  4. #4
    Join Date
    Sep 2009
    Location
    Dallas, TX
    Posts
    20
    you could always set a min height for the client div because what is happening is its not showing up because there is nothing in the div. I hope this makes sense.

  5. #5
    Join Date
    May 2006
    Location
    Gary, IN
    Posts
    208
    Quote Originally Posted by gynxhosting View Post
    you could always set a min height for the client div because what is happening is its not showing up because there is nothing in the div. I hope this makes sense.
    I did, I have a background image set and the height at 46px.

    I just cant get it to the right of the example div and below the latest div.

    Instead, the client div is appearing behind the example div.

  6. #6
    Join Date
    May 2006
    Location
    Gary, IN
    Posts
    208
    can anyone help?

  7. #7
    Join Date
    Sep 2009
    Location
    Cherry Valley, IL
    Posts
    8
    Here is the solution.

    <div id="design">
    <div id="example">
    </div>
    <div id="latest">
    <span class="latesttext">LATEST PROJECT 5.22.09</span>
    <div id="client">i'm the client
    </div>
    </div>
    </div>

  8. #8
    Join Date
    Sep 2009
    Location
    Dallas, TX
    Posts
    20
    thats the same thing i was tell ya. You can't have an empty div. you have to use a spacer or something.

  9. #9
    Join Date
    Oct 2009
    Location
    San Diego, CA
    Posts
    65
    I actually use position:relative; for all of my positioning needs. But that's besides the point

    Anyhow, so I think you just want them staked yes? All you need to do it add a clear: both; or clear: right;

    Code:
    #design {
    	margin: auto;
    	background: transparent;
    	width: 1059px;
    }
    
    #example {
    	display:block;
    	position: absolute;
    	background: transparent url(images/example.png);
    	height: 217px;
    	width: 589px;
    }
    
    #latest {
    	float: right;
    	background: transparent url(images/latest.png) no-repeat;
    	height: 28px;
    	width: 470px;
    	padding-top: 10px;
    }
    
    .latesttext {
    	font: 11px Tahoma, Geneva, sans-serif;
    	color: #4e4e4e;
    	padding-left: 215px;
    }
    
    #client {
    	float: right;
    	background: transparent url(images/client.png) no-repeat;
    	height: 46px;
    	width: 470px;
    	margin-top: 40px;
    	clear: right;
    }
    Code:
    <div id="design">
    	<div id="example"></div>
    	<div id="latest">
    		<span class="latesttext">LATEST PROJECT 5.22.09</span>
    	</div><!--end latest-->
    	<div id="client">I'm the client</div>
    </div><!--end design-->
    You can easily adjust the gap between the two bars by altering the
    #client margin-top: 40px; to your liking.

    I would show you but I don't have image privileges yet but you can try it and see that it works! Good luck to you, feel free to send me a pm if you have any questions

Similar Threads

  1. 3 quick questions with 3 quick answers (please help)
    By dav in forum Dedicated Server
    Replies: 13
    Last Post: 11-09-2006, 05:06 AM
  2. Best managed server providers? QUICK QUICK!
    By gamer1888 in forum Dedicated Server
    Replies: 3
    Last Post: 07-01-2006, 02:39 PM
  3. Need a quick programmer for quick job
    By echazen in forum Employment / Job Offers
    Replies: 3
    Last Post: 02-12-2006, 04:50 AM
  4. Replies: 6
    Last Post: 05-19-2004, 08:40 AM
  5. Quick tasks, quick payment, PHP developer wanted
    By Decius in forum Employment / Job Offers
    Replies: 2
    Last Post: 11-14-2002, 06:25 PM

Posting Permissions

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