# Solved: html page not displaying properly



## aconite (Feb 1, 2006)

hi,

I can't seem to work out why the page is not displaying properly. I have attached how I want it to display and also how it is rendering in firefox, any help greatly appreciated, also is there a correct way to code the page

css

#wrapper {margin:0 auto; width:1024px; height:2080px; }
#wrapper .mainContent {width:820px; margin-left:150px;}
#wrapper .innerContent {width:700px; margin-left:25px; padding-top:29px;}
form p {padding:15px; width:300px;}
form p.email {margin-left:28px;}
form p.name {margin-left:24px;}
form p.text {margin-left:8px;}
input, textarea {
padding:9px;
border: 1px solid #e5e5e5; /*#bac0a2*/
outline:0;
font:'century gothic';
width:200px;
-moz-box-shadow:rgba (0, 0, 0, .1) 0 0 8px;
-webkit-box-shadow:rgba (0,0,0, .1) 0 0 8px;
box-shadow:rgba (0, 0, 0, .1) 0 0 8px;
background:#ffffff;
background:-moz-linear-gradient (top, #ffffff, #eeeeee 1px, #ffffff 25px);
background:-webkit-gradient (linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
}

textarea {width:200px; max-width:200px; height:140px; line-height:150%;}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color:#c9c9c9;
-moz-box-shadow:rgba (0, 0, 0, .15) 0 0 8px;
-webkit-box-shadow:rgba (0,0,0, .15) 0 0 8px;
box-shadow:rgba (0, 0, 0, .15) 0 0 8px;	
}

form label {float:left; margin-right:10px; color:#7d7d7a; font-family:'century gothic'; padding:8px; font-size:1.0em;}

.submit input {
padding:9px 15px;
width:75px;
cursorointer;
background:#617798;
border:0;
font-size:1.2em;
color:#fff;
margin-left:95px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

#social {float:right; font-family:'century gothic'; font-size:10px; width:350px; margin-right:16px; color:7d7d7a;}

html

Name

Email

Telephone

Message

You can also find me at:


----------



## tomdkat (May 6, 2006)

You should enable borders on the form and on the "social" DIV so see how things are laying out.

So, in your stylesheet:

form { border: 1px solid red; }
#social { border: 1px solid blue; }

That will tell you how the form is laying out in respect to the "social" DIV. Once you have that done, please post new screenshots and we can go from there.

Without looking into anything, my gut tells me you'll want to put the inside a DIV or maybe apply a "float" to the "social" DIV.

Peace...


----------



## aconite (Feb 1, 2006)

tomdkat,

will reply back to you soon


----------



## aconite (Feb 1, 2006)

tomdkat,

have attached screenshot with the blue and red borders,
I have floated the social div to the right. 
still trying to work out why the social div won't move up
Thanks for your help


----------



## tomdkat (May 6, 2006)

Thanks for the screenshot. That doesn't look like what I expected but we'll roll with it. 

I see where you have a float applied to the "#social" DIV. Since the form, itself doesn't have a float applied, the browser will put the "#social" DIV after the form.

So, code the "#social" DIV FIRST in the HTML and see how things render:


```
<div class="innerContent">
[b][color=red]
<!-- Code the "social" DIV FIRST -->
<div id="social">
<p>You can also find me at:</p>

<p class="linkedin">
<img src="images/LinkedIn.png" width="64" height="64" border="0" alt="linkedin" />
</p>

<p class="twitter">
<img src="images/Twitter.png" width="64" height="64" border="0" alt="twitter" />
</p>

</div> <!-- end social -->
[/color][/b]


<form>
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>

<p class="email">
<input type="text" name="email" id="email" />
<label for="email">Email</label> 
</p>

<p class="phone"> 
<input type="text" name="phone" id="phone" />
<label for="phone">Telephone</label>
</p> 

<p class="text">
<textarea name="text"></textarea>
<label for="text">Message</label>
</p>

<p class="submit">
<input type="submit" value="send" />
</p> 
</form >

</div> <!-- end innerContent -->
```
See what that does. It won't fix the issue completely, but it's a starting point.

Peace...


----------



## aconite (Feb 1, 2006)

thanks very much for your help, which is greatly appreciated, here is the screenshot after I coded the #social first,
I have taken out the blue and red borders. Why does the browser render the float first before the form?
This is how I wanted it to look like


----------



## tomdkat (May 6, 2006)

Great! Glad it's working! Here is a (now closed) thread I started with a link to a GREAT tutorial on using CSS floats. Check out that article when you have time. 

The reason the float didn't appear to work the way you wanted originally is because the HTML form element was already part of the flow of the document (the web page). When an element has a float applied, it's taken OUT of the "normal flow" of the document and that is why the page appears as it does now.

So, consider this: with your original HTML, the browser rendered the HTML form FIRST, which was part of the normal flow of the document. Cool. Then, when the browser hit the "social" DIV, it rendered that AFTER the HTML form, since the HTML form was part of the "normal flow" of the document (the page), and it put that DIV (social) on the right side of the page (or containing element at least).

By changing the HTML to have the "social" DIV coded first, the browser will position that DIV where you want it and THEN render the HTML form as if the "social" DIV wasn't coded at all. Why? Because the float applied to the "social" DIV takes that DIV OUT of the "normal flow" of the document.

The tutorial I mentioned does a much, much better job of explaining this than I can. 

Peace...


----------

