PDA

View Full Version : Second form will not line up


johnMoss
08-23-2011, 03:15 PM
Hey guys,
Can't figure out where or why I'm going wrong... There are to be a total of 3 forms on the page, I've finished the second one and it just refuses to line up. Each form is in a separate div, and inside CS4 the second form gives the appearance of refusing to go into the container divs. Weird... Whazzupp??

http://www.johnmossdesigns.com/test/contact.html

CSS:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #ffffff;
background-image: none;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.oneColFixCtr #container {
width: 1050px; /* the auto margins (in conjunction with a width) center the page */
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: none;
}
#pageTitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #c0c0c0;
}

#blankPageSpacer {
margin-bottom: 120px;
clear: both;
}

.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-image: none;
text-align: center;
}#firstPagelogo {
margin-bottom: 65px;
margin-top: 75px;
}
#landingPage {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #c0c0c0;
margin-bottom: 40px;
margin-top: 80px;
}

#dynamic glass_id {
}
#menuWrap {
height: 35px;
width: auto;
background-image: none;
padding-top: 5px;
}
#enter {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 18px;
color: #c0c0c0;
}
#frontPageMenu {
color: #c0c0c0;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 40px;
}
color { inherit;
}

a {
text-decoration: none;
color:inherit;
}
a:link {
COLOR: #c0c0c0;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #000000;
}
a:active {
COLOR: #00FF00;
}
.mainMenu {
margin-top: 50px;
margin-left: 625px;
width: auto;
margin-bottom: 0px;
float: right;
}
.pagelogo {
height: auto;
width: auto;
}
.disclaimer {
color: #C0C0C0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-align: left;
padding-left: 50px;
}
#portraitForm {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #c0c0c0;
width: 400px;
background-color: #FFFffe;
margin-left: 0px;
font-weight: bold;
}
#howhear {
font-family: Georgia, "Times New Roman", Times, serif;
color: #c0c0c0;
text-align: left;
}
#serviceQuestion {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #c0c0c0;
width: 400px;
background-color: #FFFffe;
font-weight: bold;
float: right;
position: relative;
}

gentleone
08-23-2011, 06:57 PM
Add float: left to #portraitForm, John. Another thing you can combine all the font properties to shorthand.


#portraitForm {
float: left;
font: bold 14px Georgia, "Times New Roman", Times, serif;
color: #c0c0c0;
width: 400px;
background-color: #FFFffe;
margin-left: 0px;
}

johnMoss
08-23-2011, 07:10 PM
OK, worked like a champ. :-D
Kinda curious though; As the portrait form is in a sequential flow and it's own div, my first thought is it should by default occupy the next top left portion available. I obviously am still not quite up to speed on positioning. Any favorite reading reference on this particular nuance? Float left I had tried also on that div, but I didn't float both of them at the same time :(

gentleone
08-23-2011, 07:38 PM
By default divs will stack up on each other. Even if you gave that portaitForm div a width of 400px, the next element in the markup will just drop below. Unless you take it out of the normal flow with that float: left;

To get a better understanding of floats this might be a good resource for you.
http://css.maxdesign.com.au/floatutorial/

Floats for positioning is actually a 'hack' because it was not invented to construct layouts. Yes, I know... that's what they said about tables as well, but the float property was invented so that developers could wrap text around content images. But the float property happened to work pretty well to lay out pages - better than tables - and because there is no better alternative (yet) we're still using it.

People at W3C are working hard to get finally something that is intend to layout pages. Also Adobe is working on a nice method (CSS regions), but which one is going to finally meet the spec... that's the big question :)

So have a little look into the future of CSS positioning:
http://www.netmagazine.com/features/future-css-layouts

johnMoss
08-23-2011, 10:49 PM
Perfect. Thanx:)