SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: Help with divs

  1. #1
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with divs

    Hi all,

    On my homepage, i made 4 boxes. I used css, and they all came out even.

    On another page of my site, i have been trying to make them even out, using the same ids, but they aren't working. Any idea what I am doing wrong?

    Here is the CSS,
    Code CSS:
    #pinkleftbox {
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: left;
    	background-color: #FEB0B0;
     
    }
     
    #blueleftbox {
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: left;
    	background-color: #AFD1E9;
     
    }
     
    #pinkrightbox{
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: right;
    	background-color: #FEB0B0;
    }
     
    #bluerightbox {
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: right;
    	background-color: #AFD1E9;
     
    }
    and here is the html
    Code HTML4Strict:
    <div id="pinkleftbox">
     
    We can diagnose and repair various types of computer problems <a href="/">click here</a> to contact us if you are experiencing any of the following:
    	<ul>
    		<li>Computer Running Unusually Slowly</li>
    		<li>Random Crashes / Frequently Freezes</li>
    		<li>Unexpectedly Shuts Down or Restarts</li>
    		<li>"Blue Screen of Death" Errors</li>
    		<li>Virus Infection</li>
    		<li>Computer will not boot (Start)</li>
    		<li>Hardware / Driver Issues</li>
    		<li>Hardware replacement</li>
    		<li>Audio / Video Issues</li>
    		<li>Power Supply Issues</li>
    		<li>And More!</li>
    	</ul>
     
     
    Sometimes computers may act a little strange and you may be unsure which of these categories, if any, your problem fits into. If that's the case, no problem! Simply <a 
     
    href="/">click here</a> to contact us and let us know what you are experiencing. We will help figure out the problem and the quickest and most cost effective solution! 
    <br/><br/>
    </div> <!--endpinkleftbox-->
     
     
     
    <div id="bluerightbox">
    We can also perform various types of preventative maintenance and hardware upgrades to keep your computer running quickly and smoothly! We can come right to your home to do 
     
    this, so you don't have to be without your computer! These services include:
    	<ul>
    		<li>Anti-Virus Software Installation</li>
    		<li>Virus Scanning</li>
    		<li>System Backup Software Installation </li>
    		<li>Schedule regular back-ups</li>
    		<li>PC Tune-Up</li>
    		<li>Increased Storage Space (Internal or External)</li>
    	</ul>
     
    We can also do remote mainentance. We can have a shared session with you to do reventative maintenance. One of our technicians will log in and perform these services while you 
     
    watch. We have maintenance packages including:
     
    	<ul>
    		<li>Weekly</li>
    		<li>Bi-Weekly</li>
    		<li>Monthly</li>
    		<li>Custom Plans</li>
    	</ul>
     
    </div> <!--endbluerightbox-->
     
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     
    <div id="blueleftbox">
     
    Are you looking for a new PC? We can help you design a PC that is right for your needs and your budget! We will custom design and build your PC and deliver it right to your 
     
    door! our services include:
    	<ul>
    		<li>Custom PC Design - including free consultation!</li>
    		<li>PC Assembly - We will not only design, but build you PC (at no extra charge!)</li>
    		<li> FREE DELIVERY!  - After we design and build your PC, we will deliver and set it up for FREE!!</li>
    		<li>PC Consultation - if you really want a PC from a place like HP or Dell, we will help you decide what is best for your needs and budget!</li>
     
     
    </div><!--end blueleftbox-->

    the page is no where near done, but some of it it uploaded at www.heightsdigital.com

    any help is appreciated! Thanks!!

    ~Lauren
    You know I love it when you talk techie to me!

  2. #2
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The Problem is with float, when you want element to float next to each other. the other element follows the first element property, in your case u have given
    Code CSS:
    #pinkleftbox {
        width: 460px;
        border: 3px solid #ff0000;
        margin: 0;
        padding: 5px;
        float: left;
        background-color: #FEB0B0;
     
    }
    and second div (which you want to be floated next to first div ) has this property
    Code CSS:
    #bluerightbox {
        width: 460px;
        border: 3px solid #ff0000;
        margin: 0;
        padding: 5px;
        float: right;
        background-color: #AFD1E9;
     
    }
    The mistake it that second element has property of float:right, thus it float on the right side of the screen, just remove it float and everything will be good, also add a margint:5px; (depending how much margin you want), i have corrected the css and here is it.
    Code CSS:
    #pinkleftbox {
    	width: 460px;
    	border: 3px solid #ff0000; 
    	margin: 0; 
    	padding: 5px;
    	float: left;
    	background-color: #FEB0B0;}
    #blueleftbox {
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: left;
    	background-color: #AFD1E9;}
    #pinkrightbox{
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin: 0;
    	padding: 5px;
    	float: right;
    	background-color: #FEB0B0;}
    #bluerightbox {
    	width: 460px;
    	border: 3px solid #ff0000;
    	margin-left:5px;
    	padding: 5px;float: left;
    	background-color: #AFD1E9;}
    Hope this is what your looking for
    All those who wander aren't lost.

  3. #3
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will this change the div on the home page? they seem to line up.
    You know I love it when you talk techie to me!

  4. #4
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i changed them, and uploaded them to www.heightsdigital.com. The first two boxes still seem to be off by 1/2 a line. if i put in a break, it's too much. thanks!
    You know I love it when you talk techie to me!

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    if your mean the distance the text and boxes. using too many <br/> isn't a good tidy markup, if u want space between them, u can class the h4 element and the p element to have margin-bottom:20px; (depending on how much u want the distance to be), and then u can achieve the same amount of distance between boxes and text as of lots of <br/> but this time, good tidy markup
    All those who wander aren't lost.

  6. #6
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    distance between the boxes is fine. It just seems that, even though they adjust to the content inside them (vertically), the boxes are 1/2 a line off. If it was a full line, I could just add a <br>, but in either direction, it seems half off.
    You know I love it when you talk techie to me!

  7. #7
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, thanks! I am somewhat new at this, and was wondering if there was a better way than using all of the breaks. Thanks. I will try your suggestion.!
    You know I love it when you talk techie to me!

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    from inside or outside?
    All those who wander aren't lost.

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrooklynSpice View Post
    Also, thanks! I am somewhat new at this, and was wondering if there was a better way than using all of the breaks. Thanks. I will try your suggestion.!
    you welcome, i am learning myself though, i had same problem when i started. its common and frustrating, but practice and experimenting make you better
    All those who wander aren't lost.

  10. #10
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    from inside. There is the background color, and the border, and on the home page, they line up, but on the other pages, the boxes inside the border are slightly off.
    You know I love it when you talk techie to me!

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    without a page example its hard to say what's going wrong. i have the home page. paste the link where you having problem
    All those who wander aren't lost.

  12. #12
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know I love it when you talk techie to me!

  13. #13
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    r u asking about the heading? overlapping menu, because i am little confused as the home page got boxes, but has just formated text?
    All those who wander aren't lost.

  14. #14
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you look at the style sheet, i used "pinkleftbox", "bluerightbox", "bluerightbox", and "pinkleftbox". on the homepage, they line up. on the computer page, they won't line up.
    You know I love it when you talk techie to me!

  15. #15
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    on Computer page. there are no boxes like on homepage. its just text
    All those who wander aren't lost.

  16. #16
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually it was, "pinkleftbox", "bluerightbox". blueleftbox", pinkrightbox".
    You know I love it when you talk techie to me!

  17. #17
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you sure? i uploaded it to http://www.heightsdigital.com/computer.html
    You know I love it when you talk techie to me!

  18. #18
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it wasn't showing css before, now it is.just remove float:from row 2 box, the problem is with width's it doesn't add up total to the size of wrapper as wrapper is 980px with 10px border each side. we have to subtract the 10 from each side making it, 960px, now your content is has margin of 10px, subtract that two from 960, we are left with 940, now ur boxes pinkbluebox (i dont remember the name exctaly) have width of 460, and 3px of border, making it 466, now box i is 466, and column 2 is 463 that makes, 932, i know it doesnt't sum of to be excat of wrapper but i m a new learner myself. there must be more element i might mix which make the inner content width more than outer. that is why its happening. i hope it solve your problem. though i am learning it myself.
    Edit, pls correct me if i am wrong. i love to add things to my knwoledge
    All those who wander aren't lost.

  19. #19
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    did it helped?
    All those who wander aren't lost.

  20. #20
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, sorry for the slow response. I was out of town for a few days. Back now. I will try your suggestions, and keep you posted. Thanks!!
    You know I love it when you talk techie to me!

  21. #21
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I found the problem. The box on the right had two <ul> lists in it. For some reason, this was making the height of the two boxes uneven. By simply removing one list, they are now even. Thanks again for all of your help.I'm sure i'll be back for more help, so we'll talk again soon Have a great night!!

    ~ Lauren
    You know I love it when you talk techie to me!


Bookmarks

Posting Permissions

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