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/html-css/css-block-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

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 (http://www.exitfegs.co.uk/Document2.htm).

Frank

Much useful stuff HERE (http://www.exitfegs.co.uk/Sources.html).
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

!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>



<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>

Louu

04-17-2011, 10:27 AM

Thanks, But Its still below not side by side...:/

effpeetee

04-17-2011, 10:39 AM

Thanks, But Its still below not side by side...:/
They are side by side on my PC.
What screen resolution are you using.

Frank

Louu

04-17-2011, 04:54 PM

Here is a print screen of what I am seeing
http://i54.tinypic.com/260v5ex.jpg

screen resolution 1280 by 800

abduraooft

04-17-2011, 05:03 PM

If you are trying to make column based layout, I'd recommend you to learn it from tutorials like http://bonrouge.com/2c-hf-fixed.php

effpeetee

04-18-2011, 09:13 AM

I obviously mis-understood you Louu.
abduraooft is right though. Better to use the resource he gives you.

Frank

emilyjones

04-18-2011, 10:19 AM

Well great job done dude :)