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.
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17
Like Tree1Likes

Thread: (Totally new to this) I can't get Div's & Floats to work as expected

  1. #16
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Gentlemen, I thank you for your very complete responses. I'll once again be printing your responses and trying to understand them tomorrow. I have to admit that divs and floats still confuse me, but I will be also checking your links and trying to work through them. As soon as I can force myself to sit for an extended period of time I'm also going to start taking the web design class that I purchased - and I'm sure that'll provide a better foundation than my hopping around pillar to post. When learning something new I've always just tried to do it - and I think this will be the time that's not going to work. I'm off to bed, again many thanks! Will
    Excavator likes this.

  2. #17
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Good evening gentlemen.

    I finally had some free time and have been working on my surprise webpage for my friend. I've done nothing with formatting it or trying to make it attractive yet (as is very obvious - but I admit I do sort of like plain).

    I was really having a horrible time with the right column but after working through the validator errors I FINALLY have it not looking totally f'd up, but only partially

    I have two questions: First, I wondered what "best practice" is when you have a box with a photo in the top left corner, want a title to the right of it, then want the body of your text below the photo? I know I can achieve what I want with breaks or paragraphs, but I'm trying to force myself to do the right thing even if it's more work.

    Like this (the photophoto is a "placeholder" where the photo would be):

    -----------------------------------------------
    photophoto title
    photophoto
    photophoto
    photophoto
    photophoto

    text text text text text....
    -----------------------------------------------

    Second, and the problem I've spent a lot of time trying to fix but can't figure out -- is why in the right column the bottom box won't move up to be below the top box, and allow the footer to similarly lift.

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Our Fine Company</title>
        <meta charset="utf-8">
        <style type="text/css">
                #container {
                        width: 900px ;
                        margin-left: auto;
                        margin-right: auto;
                        text-align: left;
                    }
                    
                    #rightSignin, #rightB {
                        margin-left:  449px;
                    }
                    
                    #leftLogo, #leftB {
                        float: left;
                        width: 449px;
                    }
                    
                    #clearTopPromo {
                        clear: both;
                        text-align: center;
                    }
                    
                    #clearBottom {
                        clear: both;
                    }
                    
                    /* show innermost divs */
                    div > div > div {border: 1px solid; margin: 5px;}
        </style>
    </head>
    
    <body>
        <div id="container">
            <!-- Section A Full Width-->
    
            <div id="leftLogo"><img alt="LL logo" src="LLlogo.png"></div>
    
            <div id="rightSigin">
                Sigin
            </div>
    
            <div id="clearTopPromo">
                <p><strong>Don't go without help!<br>
                Since 19## we may have helped your grandparents or parents find
                staff or employment.</strong></p>
            </div><!-- Section B Half Width-->
    
            <div id="leftB">
                <div id="employer">
                    <img alt="Employer Image" height="128" src=
                    "stock-photo-an-arab-person-shaking-hands-with-a-businessman-isolated-on-white-background-59434753.jpg"
                    style="float:left;" width="200">
    
                    <p><strong>EMPLOYERS</strong><br></p>
    
                    <p>Welcome! We specialize in hospitality service and industrial
                    process workers. Do you require help that's pre-qualified and
                    ready to work?<br>
                    <br>
                    We're your one-stop labor solution with more than a
                    half-century of experience.<br>
                    <br>
                    Our rates include payroll and tax services, unemployment and
                    BWC insurance, safety equipment, pre-screening, and more. We
                    will go above and beyond to exceed your expectations.<br>
                    <br>
                    Phone us today at TEL NUMBER for more information and fastest
                    response.<br>
                    <br>
                    Alternately, make a selection below... How may we help you?</p>
                    <!--following idea from boogiejack.com for method to have selection go to page without additional action--><!--all the page targets ARE wrong!  MAY WANT TO RECONSIDER AS THIS MIGHT BE KICKING UP AN ACTIVEX WARNING-->
    
                    <form name="boogie">
                        <select name="surf" onchange=
                        "location=document.boogie.surf.options[document.boogie.surf.selectedIndex].value;">
                        <option selected>
                                Please select from the following options...
                            </option>
    
                            <option value="empinfotemp.html">
                                We would like information on temporary staffing.
                            </option>
    
                            <option value="empordertemp.html">
                                We would like to place an order for temporary
                                staff.
                            </option>
    
                            <option value="empinfotempperm.html">
                                We would like information on temp-to-perm staffing.
                            </option>
    
                            <option value="empordertempperm.html">
                                We would like to place an order for temp-to-perm
                                staff.
                            </option>
    
                            <option value="empinfopayproc.html">
                                We would like to discuss your payroll processing
                                services.
                            </option>
    
                            <option value="empinfoconsult.html">
                                We would like to discuss your consulting services.
                            </option>
                        </select>
                    </form><!--EMAIL TRIGGERS TO START
                            We would like additional information on temporary staffing. >SALES A
                            We would like to place an order for temporary staff. >DISPATCH
                            We would like additional information on temp-to-perm staffing. >SALES A
                            We would like to place an order for temp-to-perm staff.  >SALES A
                            We would like to discuss your payroll processing and/or consulting services.  >SALES B
                            -->
                </div>
    
                <div id="operations">
                    <img alt="Cityscape" height="128" src=
                    "BeverlyAbrahamCapture.jpg" style="float:left;" width="200">
    
                    <p><strong>OPERATIONS &amp; BUSINESS CONTACTS</strong><br></p>
    
                    <p>How may we help you today?<br>
                    Please make your selection below.</p>
    
                    <form name="boogie">
                        <select name="surf" onchange=
                        "location=document.boogie.surf.options[document.boogie.surf.selectedIndex].value;">
                        <option selected>
                                Please select from the following options...
                            </option>
    
                            <option value="opspayable.html">
                                I'm a client. I have a question related to an
                                invoice.
                            </option>
    
                            <option value="opsreceivable.html">
                                I'm a supplier. I have a question for accounts
                                payable.
                            </option>
    
                            <option value="opsalert.html">
                                I have a potential business referral.
                            </option>
                        </select>
                    </form><!--        
                         I'm a client. I have a question related to an invoice. Please contact me. >ACCTSRECEIVABLE
                         I'm a supplier. I have a question for accounts payable. Please contact me. >ACCTSPAYABLE
                        -->
                </div>
            </div>
    
            <div id="rightB">
                <div id="worker">
                    <img alt="Worker Image" height="128" src=
                    "smilingworkerfromfreedigitalphotosdotnet.jpg" style=
                    "float:left;" width="200">
    
                    <p><strong>WORKERS</strong><br></p>
                    <!--(overlay urgency reminder)-->
    
                    <p>Welcome! We specialize in hospitality service and industrial
                    process workers. But I must explain to you how all this
                    mistaken idea of denouncing pleasure and praising pain was born
                    and I will give you a complete account of the system, and
                    expound the actual teachings of the great explorer of the
                    truth....<br>
                    <br>
                    No one rejects, dislikes, or avoids pleasure itself, because it
                    is pleasure, but because those who do not know how to pursue
                    pleasure rationally encounter consequences that are extremely
                    painful.<br>
                    <br>
                    Phone us today at TEL NUMBER for more information and fastest
                    response.<br>
                    <br>
                    Alternately, make a selection below... How may we help you?</p>
                    <!--following idea from boogiejack.com for method to have selection go to page without additional action--><!--all the page targets ARE wrong!  MAY WANT TO RECONSIDER AS THIS MIGHT BE KICKING UP AN ACTIVEX WARNING-->
    
                    <form name="boogie">
                        <select name="surf" onchange=
                        "location=document.boogie.surf.options[document.boogie.surf.selectedIndex].value;">
                        <option selected>
                                Please select from the following options...
                            </option>
    
                            <option value="workinfowork.html">
                                I would like information about working for
                                OURCOMPANY.
                            </option>
    
                            <option value="workresume.html">
                                I would like to submit my resume for consideration.
                            </option>
    
                            <option value="workinfooportunity.html">
                                I would like information about employment
                                opportunities.
                            </option>
    
                            <option value="workquestion.html">
                                I'm an employee with a payroll question that is not
                                urgent.
                            </option>
    
                            <option value="workrecordchange.html">
                                I'm an employee with a phone number or an address
                                change.
                            </option>
    
                            <option value="workaltert.html">
                                I'm an employee with a potential business referral.
                            </option>
                        </select><br>
                    </form><!--        
                                 I would like information about working for OURCOMPANY Labor or OURCOMPANY. >DISPATCH
                                 I would like to submit my resume for consideration for placement by OURCOMPANY Labor or OURCOMPANY. >UPLOAD
                                 I've previously submitted my resume and would like information about current employment opportunities with OURCOMPANY Labor or OURCOMPANY. >DISPATCH
                                 I'm a employee with a payroll or records question that is not urgent. Please contact me. >PAYROLL
                                 I'm a employee notifying you of a phone number and/or an address change for my records. >DISPATCH
                                 I'm an employee with a potential business referral for OURCOMPANY Labor or OURCOMPANY. >SALES A
                                 -->
                </div>
    
                <div id="clearBottom">
                    ****INSERT SOME KIND OF INFOGRAPHIC HERE****<br>
    
                    <p><strong>SAFETY FIRST!</strong><br>
                    Realize that safety depends upon you, so focus on safety every
                    day.</p>
    
                    <p><strong>Equal Opportunity Employer Notice</strong><br>
                    EMPLOYER provides equal opportunity in employment for all
                    qualified persons and prohibits discrimination in employment on
                    the basis of race, color, religion, creed, sex, sexual
                    orientation, gender identity, national origin, ancestry, age,
                    veteran status, disability unrelated to job requirements,
                    genetic information, military service, or other protected
                    status.</p>
                </div>
            </div>
    
            <footer>
                <p>Footer <strong>OURCOMPANY Labor and OURCOMPANY</strong> have two
                offices to better serve you.<br>
                <strong>Cleveland</strong> - in the historic warehouse district at
                Address * Cleveland, Ohio ##### * TEL NUMBER Open 5A to 5P<br>
                <strong>Akron</strong> - in Kenmore neighborhood at Address *
                Akron, Ohio * TEL NUMBER Open 5A to 5P<br>
                (c)2014</p>
            </footer>
        </div>
    </body>
    </html>
    Last edited by Anonymoususer; 05-04-2014 at 11:13 AM. Reason: corrected omission


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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