More Help Please

Louu · 04-16-2011, 03:01 PM

I can't seem to see why my 2nd content appears below my first?
How can I make it so they float side by side?

Coding:

<style>
html {height:100%;}
body {
margin:0;
padding:0;

height:100%;
background-color:#ffffff;
}

#wrap {
background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
min-height:100%;
width:700px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}

#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}

p, td
{font-family: Century Gothic;
font-size: 11px;
font-weight: 500;
color: #FFFFCC;
text-decoration: none;}

b
{font-size: 12px;
text-decoration: bold;
margin: 0px;
font-weight: 650;
color: #999966;
text-align: left;}

i
{color: #333333;
font-style: italic;}

u
{text-decoration: underlined;
color: #000000;
font-size: 11px;
}

s
{text-decoration: strikethrough;
colour: #333333;
font-size: 12px;
}

h1
{
font-size:19px;
line-height:18px;
text-align:right;
background-color: 999966;
border-bottom: 1px dotted #330000;
color:#333333;
font-family:Century Gothic;
text-decoration: none;}

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: CCCC99;
border-bottom: 1px dashed #333333;
border-top: 1px dashed #333333;
color:#000000;
font-family:Century Gothic;
text-decoration: none;}

h3
{
font-size:10px;
line-height:11px;
text-align:left;
background-color: ;
border-bottom: 1px dashed #999966;
color:#000000;
font-family:Arial;
text-decoration: none;}

a:link,
{font-family: Century Gothic;
font-size: 10px;
color:#000000;
text-decoration:none;
letter-spacing: 1px;}

a:hover,
{font-family: Century Gothic;
font-size: 10px;
color: #333333;
letter-spacing: 1px;}

</style>

<div id="wrap">
<div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
<h2>Home</h2>
<a href=""><h3>Home Page</h3></a>
<br>
<h2>Club Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Site Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Siggys</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3>

</div>
</div>
<div id="inner-wrap">
<div id="wrap">
<div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">

<center>
<img src=http://i56.tinypic.com/258wfic.png
>
</center>

<h1> Home </h1>
<b>Hello<br>
</b>

</div>
</div>
</div>

paul.mac · 04-16-2011, 03:55 PM

I think it is because <h2> is a block element and by default includes a CR before and after - see http://www.webdesignfromscratch.com/...ck-and-inline/

Paul

Louu · 04-16-2011, 05:02 PM

I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
any other thoughts?

oesxyl · 04-16-2011, 05:15 PM

Quote:

Originally Posted by Louu

I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
any other thoughts?

use [ code] and [ /code] tags, without spaces, when you post code, please. You can edit your previous post to fix this.

the (x)html markup is invalid, at first look there are two elements with same id.
i don't know what doctype you use but probably center is depreciated, css is probably invalid too, i seen a typo 'underlined' instead of underline.
probably is better to validate both first.

best regards

Louu · 04-16-2011, 05:30 PM

Thanks Will Change That, And Be Sure To Use [code] tags in future.
can anyone tell me why the content is appearing below, and not side by side.

effpeetee · 04-16-2011, 06:17 PM

I have corrected several things. My eyesight is too poor to do more.
I have put the result here.

Frank

Much useful stuff HERE.
Use the Search facility. Single words often work best.

effpeetee · 04-16-2011, 06:22 PM

This is the code so far. Still needs attention.

Frank

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title></title>
<style type ="text/css">
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
}

#wrap {
background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
min-height:100%;
width:700px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}


#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}



p, td
{font-family: Century Gothic;
font-size: 11px;
font-weight: 500;
color: #FFFFCC;text-decoration: none;}



b
{font-size: 12px;
text-decoration: bold;
margin: 0px;
font-weight: 600;
color: #999966;
text-align: left;}

i
{color: #333333;
font-style: italic;}

u
{text-decoration: underline;
color: #000000;
font-size: 11px;
}


s
{text-decoration:line-through;
colour: #333333;
font-size: 12px;
}

h1
{
font-size:19px;
line-height:18px;
text-align:right;
background-color: #999966;
border-bottom: 1px dotted #330000;
color:#333333;
font-family:Century Gothic;
text-decoration: none;}

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: #CCCC99;
border-bottom: 1px dashed #333333;
border-top: 1px dashed #333333;
color:#000000;
font-family:Century Gothic;
text-decoration: none;}

h3
{
font-size:10px;
line-height:11px;
text-align:left;
background-color:#cccc99 ;
border-bottom: 1px dashed #999966;
color:#000000;
font-family:Arial;
text-decoration: none;}


a:link,
{font-family: Century Gothic;
font-size: 10px;
color:#000000;
text-decoration:none;
letter-spacing: 1px;}

a:hover,
{font-family: Century Gothic;
font-size: 10px;
color: #333333;
letter-spacing: 1px;}




</style>

</head>

<body>

<!-- page content goes here -->

<div id="wrap">
<div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
<h2>Home</h2>
<a href=""><h3>Home Page</h3></a>
<br>
<h2>Club Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Site Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Siggys</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3>

</div>
</div>
<div id="inner-wrap">
<div id="wrap">
<div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">

<center>
<img src=http://i56.tinypic.com/258wfic.png
>
</center>

<h1> Home </h1>
<b>Hello<br>
</b>



</div>
</div>
</div>
</body>
</html>