If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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

About a month ago I started reading books and the internet trying to learn html/css coding from scratch.
Know that I've read posts here and have tried w3 schools and such and still can't figure out what I'm doing wrong.
I've bought a formal guided class to learn more, but I've also just been trying to "dive in" and do it.
What you see below is my first attempt ever at making a real website -- for free for a friend.
I've done validation and have fixed as many things as I can, so believe me I'm trying.
The format that I'm trying to achieve is basically two columns (eventually I want to add a border on far left and right).
My goal resembles this:
LOGO--------------------------SIGNIN
--------------HEADER----------------
EMPLOYER BLOB---------WORKER BLOB
OPERATIONS BLOB-------PROMO BLOG (same as below)
FOOTER-----------------PROMO BLOG
Yeah, it sounds simple but my text flows in strange ways that I can't figure out.
IF YOU SEE ANY BEST PRACTICES things that I'm not doing, please tell me, too. I want to do this right.
I've not even started to mess with any formatting in the way of looks, text styles, anything etc.
Thanks, Will (if anyone needs my phone number, just ask)

Code:

<!DOCTYPE html>
<html lang="en">
<style>
body {
color : black;
background-color: white;
font-family:Tahoma, Geneva, sans-serif;
margin:5%
}
h1{
font-size:40px;
}
h2{
font-size:30px;
}
h3{
font-size:20px;
}
h4{
font-size:15px;
}
#header {
padding:5px;
text-align: center;
width: 95%;
}
#hiddenlogin {
padding:5px;
text-align: right;
float: right;
margin: 35px auto;
width: 20%;
height: 30px;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
margin-bottom:1px;
}
#toppromo {
padding:5px;
text-align: center;
float: left;
margin: 35px auto;
width: 90%;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
margin-top:15px;
margin-bottom:15px;
}
#employers {
padding:5px;
text-align: left;
background-color:white;
float: left;
width: 45%;
height 300px;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
margin-bottom:15px;
}
#workers {
padding:5px;
text-align: left;
background-color:white;
float: right;
width: 45%;
height 300px ;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
margin-bottom:15px;
}
#operations {
padding:5px;
text-align: left;
background-color:white;
float: left;
width: 45%;
height 200px;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
margin-bottom:15px;
}
#bottompromo {
padding:5px;
text-align: left;
border-style:solid;
border-color:gray;
width: 45%
float: right;
margin: 35px auto;
}
#footer {
padding:5px;
text-align: left;
background-color:white;
width: 45%;
border-style:solid;
border-color:gray;
border-width:5px;
border-radius:25px;
}
</style>
<body>
<head>
<!-- deal with this later
<meta name = "Robots" content = "noindex, nofollow">
<meta name="keywords" content="temporary labor, Cleveland, temp to perm employment, employment agency, hospitality service employee, industrial employee">
<meta name="description" content="Temporary and Temp-to-Perm Employment Staffing Agency in Cleveland Ohio">
-->
<meta charset="utf-8" />
</head>
<header>
<title>OUR FINE COMPANY</title>
<img src="lllogo.png" alt="Logo" width="300" height="80" style=float:left;>
<div id="hiddenlogin">
(Hidden) Office Login
</header>
<div id="toppromo">
<p>(Promo/Tagline) Don't go without help!<br />
In 1900 we may have helped your grandparents find staff or employment. Please allow us to help you today.</p>
</div>
<div id="employers">
<img src="stock-photo-an-arab-person-shaking-hands-with-a-businessman-isolated-on-white-background-59434753.jpg" alt="Employer Image" width="250" height="128" style=float:left;>
<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;" value="GO">
<option selected>Please select from the following options...</option>
<option value="empinfotemp.html">We would like information on temporary staffing. This is not urgent.</option>
<option value="empordertemp.html">We would like to place an order for temporary staff. This is not urgent.</option>
<option value="empinfotempperm.html">We would like information on temp-to-perm staffing. This is not urgent.</option>
<option value="empordertempperm.html">We would like to place an order for temp-to-perm staff. This is not urgent.</option>
<option value="empinfopayproc.html">We would like to discuss your payroll processing services. This is not urgent.</option>
<option value="empinfoconsult.html">We would like to discuss your consulting services. This is not urgent.</option>
</select>
</form>
<!--
We would like additional information on temporary staffing. Please have a representative contact us. >SALES A
We would like to place an order for temporary staff. Please contact us. >DISPATCH
We would like additional information on temp-to-perm staffing. Please have a representative contact us. >SALES A
We would like to place an order for temp-to-perm staff. Please contact us. >SALES A
We would like to discuss your payroll processing and/or consulting services. >SALES B
-->
</div>
<div id="workers">
<img src="smilingworkerfromfreedigitalphotosdotnet.jpg" alt="Worker Image" width="250" height="128" style=float:left;>
<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;" value="GO">
<option selected>Please select from the following options...</option>
<option value="workinfowork.html">I would like information about working for OURCOMPANY or 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>
</form>
<br/>
</div>
<!--
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 id="operations">
<img src="BeverlyAbrahamCapture.jpg" alt="Cityscape" width="250" height="128" style=float:left;>
<p><strong>OPERATIONS & BUSINESS CONTACTS</strong><br />
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;" value="GO">
<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>
</div>
<!--
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 id="bottompromo">
****INSERT SOME KIND OF INFOGRAPHIC HERE****<br />
<strong>SAFETY FIRST!</strong> Realize that safety depends upon you, so focus on safety every day.<br>
<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.
</div>
<div id="footer">
<p>
<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>
</div>
</footer>
</body>
</html>

Hello Anonymoususer,
A huge help for you would be be to check your code with the validators. See the links in my signature about validating, there's one for your CSS and one for your markup. It's a great way to learn.

Users who have thanked Excavator for this post:

From what I'm getting here, it looks like you're trying to do a two column layout but you're doing it the wrong way. What you've done is take multiple DIVs and floated them left or right depending on which column you want them in. You've also done something funny with #bottompromo where it's underneath everything. Anyways, a proper two column DIV layout looks like this:

Of course, you can put much more than simple text. You can nest your current DIVs in these if you want to do that. Now, the CSS that goes this way can be done more than one way. I'll cover two, there's the liquid layout and there's the fixed layout. The liquid layout is simple.

Code:

#column2 {
margin-left: 20%;
}
#column1 {
float: left;
width: 20%;
}

If you want #column1 on the right, change float and margin to right. You can also change the width if you so desire. Now, here's the fixed layout.

The code for #container will give you an 800px fixed and centered box. The columns go inside. Make sure you have a valid DTD. If you want a third DIV to span both columns at the bottom, then use the CSS clear property. Hope that helps.

Users who have thanked Antonius for this post:

Thank you Excavator. I did run the validator, it got down to six errors (from almost 40!). I don't know how to fix them yet...
Error The character encoding was not declared. Proceeding using windows-1252. ✉
Error Line 129, Column 6: Element head is missing a required instance of child element title.
<body>
Content model for element head:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.
Error Line 130, Column 7: Stray start tag head.
<head>
✉
Error Line 136, Column 22: A charset attribute on a meta element found after the first 512 bytes.
<meta charset="utf-8" />
✉
Error Line 136, Column 25: Changing character encoding utf-8 and reparsing.
<meta charset="utf-8" />
✉
Error Line 136, Column 25: Changing encoding at this point would need non-streamable behavior.
<meta charset="utf-8" />

Thank you Excavator. I did run the validator, it got down to six errors (from almost 40!). I don't know how to fix them yet...
\snip
Thanks, Will

It's easiest to correct errors found by the validator from the top down since the cascading effect of fixing one error may eliminate several subsequent errors. If you don't know how to fix one, the hints the validator gives are usually spot on ... once you understand the error. Google helps a lot.

Just for a basic layout, have a look at a simple 2-column layout demo I have here. It could be that will address some of your mystery errors...

Excavator, again thank you for your response. Is what I'm trying to do as sketched above (with the separations) a two column layout? Sorry to be a dumba$$, but so much of this is tough to me - especially floats. Wish I'd started this a decade ago. Even though don't get it, I think it's fun.... Will

Anonymoususer, you could view that as 2 two column layouts, one stacked on the other. Here's an example. I've HTML commented the top two column layout as section A and the bottom as section B. The reason we have one stacked on the other is because the Top Promo is cleared.

Excavator, again thank you for your response. Is what I'm trying to do as sketched above (with the separations) a two column layout? Sorry to be a dumba$$, but so much of this is tough to me - especially floats. Wish I'd started this a decade ago. Even though don't get it, I think it's fun.... Will

Users who have thanked Excavator for this post:

Thank you both gentlemen. I'll be tackling this again over the next couple of days - plus I started working through the Floatutorial. I do understand a good bit of it.
It's past my bedtime - I'm a major earlybird. Have a great evening!
Will

Antonius and Excavator, I wanted to again thank you for all your help. Thanks for taking me seriously and not being nasty. I was sort of afraid to even post because of other responses I’ve seen.

I’ve been reading both your codes and see both the similarities and differences.

I see that for this two column layout, you both created the entire left side of the page, then the right.
When I was trying to set it up I expected left-to-right and that was part of why I was so confused. I was trying to lay it out as a person would read it, top left, top right, middle left, middle right, etc. I don’t think in any of the previous examples that I worked through or at least that I worked through and understood, that I “got” how the content flowed.

I think I understand that in a multi-column layout the browser will draw column 1 top to bottom, then column 2 top to bottom, then column 3 top to bottom, etc.? If my understanding above is flawed, please let me know.

I also noticed that one code used div classes vs the other which used div id’s. I think I understand that the difference between them is that div classes can be reused to format multiple divs, vs div id’s which are a one-time format? Is either one considered a better practice with the newer html?

Antonius,

When I first saw the result of yours I began to question how to make the second column extend down, and then I began experimenting and saw that it grew to fill the content. I do remember reading that but I don’t think I comprehended fully. I’m guessing that if I set up the div’s to be the same height that I should be able to line them up horizontally, but I’ve not experimented that much yet.

Classes are not unique. That is, multiple elements can have them. Whereas, IDs are unique and can only belong to one element. IDs can do two other things, (1) they can add in-page links with hash values in the URL and (2) they're more easily manipulated by JavaScript via getElementById. I tend to use IDs whenever I know I'm not going to use it again, it's perfectly acceptable to use a class though.

CSS Selectors

The following line of code:

Code:

div > div > div {border: 1px solid; margin: 5px;}

was simply used as a visual aid to you. What it does exactly is add borders and margins to DIVs nested down a few levels. The ">" symbol is the "child selector". For example, "div > p" means to select all <p> elements where the parent is a <div> element. You can read more about CSS selectors here and here.

Cleared Elements

The clear property specifies which side(s) of an element other floating elements are not allowed. So when clear:both; is applied to #clearTopPromo, it's saying "Don't wrap around left floats like #leftLogo and don't wrap around right floats like #rightSignin". Essentially, this allows the DIV to span two columns. Starting a new "section" is just makes things easy to grasp. Try playing with this to really see how it works in action. For example, see what happens when the clear is set to none or the image is floated on the other side.

Users who have thanked Antonius for this post:

I see that for this two column layout, you both created the entire left side of the page, then the right.
When I was trying to set it up I expected left-to-right and that was part of why I was so confused. I was trying to lay it out as a person would read it, top left, top right, middle left, middle right, etc. I donít think in any of the previous examples that I worked through or at least that I worked through and understood, that I ďgotĒ how the content flowed.

It can also be laid out with floats from left to right. Separating the left and right columns is just easier.

I also noticed that one code used div classes vs the other which used div idís. I think I understand that the difference between them is that div classes can be reused to format multiple divs, vs div idís which are a one-time format? Is either one considered a better practice with the newer html?

When I first saw the result of yours I began to question how to make the second column extend down, and then I began experimenting and saw that it grew to fill the content. I do remember reading that but I donít think I comprehended fully. Iím guessing that if I set up the divís to be the same height that I should be able to line them up horizontally, but Iíve not experimented that much yet.