help with float:left; attribute

dellerdynamics

New Member
Messages
5
Reaction score
0
Points
0
this is the html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>DellerDynamics</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="accordion/accordion.css" charset="utf-8"/>
<script type="text/javascript" src="accordion/accordion.js"></script>
</head>

<body>

<div><img src="images/logo.png" width="316" height="77" alt="Logo" /></div>
<!-- NAV -->
<ul id="nav">
 <li><a href="http://dellerdynamics.com" title="Home">Home</a></li>
 <li><a href="/projects/" title="Projects">Projects</a></li>
 <li><a href="/software/" title="Software">Software</a></li>
 <li><a href="/photoshop/" title="Photoshop">Photoshop</a></li>
 <li><a href="/other/" title="Other">Other</a></li>
 <li><a href="/about/" title="About">About</a></li>
 <li><a href="/i7/" title="Item 7">Item 7</a></li>
</ul>
 <ul id="subnav">
  <li id="subnavfirst"><a href="javascript: void;" title="Login">Login</a></li>
  <li><a href="javascript: void;" title="">Item 1</a></li>
  <li><a href="javascript: void;" title="">Item 2</a></li>
  <li><a href="javascript: void;" title="">Item 3</a></li>
 </ul>
<!-- SUBNAV -->
<div id="banner"><img src="images/banner.jpg" width="800" height="212" alt="Banner" /></div>


<!-- CONTENT -->
<img id="test" src="images/feature_2.gif" alt="" />
<div id="content">

    <h2 class="primaryHeading">Primary <span>Content</span></h2>

    <h3 class="secondaryHeading">Placeholder Content 1</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 2</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 3</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 4</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
</div>


<div id="foot">
 <p>Copyright &copy; 2008 DellerDynamics, sp &middot; All Rights Reserved<br />
 Made with valid <a href="">xhtml</a> &middot; <a href="">css3</a></p>
</div>
</body>

</html>
this is the css
Code:
/* BASE COLOR: #d99c6b
    DARKER: #e77c5b */
    
/* SETUP */
html {
    text-align: center;
    font: 10px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
    background-color: #fff;
    color: #4b4b4b;
}

body {
    margin: 0 auto;
    padding: 0;
    width: 800px;
    text-align: left;
}

a:link, a:visited {
    background-color: inherit;
    color: #ab6d00;
    text-decoration: none;
}

a:hover, a:active {
    background-color: inherit;
    color: #b9924d;
    text-decoration: none;
}

/* END SETUP */

#test {
float: left;
}


div#banner {
    margin: 0;
}


h2 span {
    background-color: inherit;
    color: #e77c5b;
}

h2.primaryHeading {
    font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    background-color: inherit;
    color: #4b4b4b;
    margin: 20px 0 0 0;
    padding: 0 0 1px 25px;
    border-bottom: 1px solid #ddd;
    background: #fff url(images/starAllianceOrange.png) left no-repeat;
    color: inherit;
    clear: both;
}

h3.secondaryHeading {
    margin: 5px 0px 0px 0px;
    padding: 5px 0px 5px 20px;
    background: #f0f0f0 url(images/starAlliance.png) left no-repeat;
    font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
}

p {
    font-size: 11px;
    margin-bottom: 15px;
}

div#foot {
    clear: both;
    margin: 0;
    padding: 0;
    width: 800px;
    height: 43px;
    background-color: #ededed;
    color: #888;
    text-align: center;
}

div#foot p {
    padding: 9px 0 0 0;
}

div#foot p a {
    text-decoration: none;
}

div#foot p a:link, div#foot p a:visited {
    background-color: inherit;
    color: #4b4b4b;
}

div#foot p a:hover, div#foot p a:active {
    background-color: inherit;
    color: #000;
}


/* NAV */
ul#nav {
    margin: 0;
    padding: 0 0 0 6px;
    width: 794px;
    height: 44px;
    background: #000 url(images/nav_bg.gif) repeat-x;
    color: inherit;
}

ul#nav li {
    float: left;
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
    /*text-transform: uppercase;*/
    font-size: 11px;
    font-variant: small-caps;
}

ul#nav li a {
    text-decoration: none;
    padding: 13px 30px 14px 30px;
}

ul#nav li a:link, ul#nav li a:visited {
    background-color: inherit;
    color: #fff;
}

ul#nav li a:hover, ul#nav li a:active {
    background-color: inherit;
    color: #c9f381;
}
/* SUBNAV */
ul#subnav {
    margin: 0;
    padding: 0 0 0 30px;
    width: 770px;
    height: 31px;
    background: #000 url(images/subnav_bg.gif) repeat-x;
    color: inherit;
    font-size: 9px;
}

ul#subnav li {
    float: left;
    margin: 0;
    padding: 9px 0 0 0;
    list-style-type: none;
    text-transform: uppercase;
}

ul#subnav li a {
    text-decoration: none;
    padding: 7px 20px 7px 20px;
    background: transparent url(images/subnav_sep.gif) no-repeat left;
}

ul#subnav li a:link, ul#subnav li a:visited {
    background-color: inherit;
    color: #303030;
}

ul#subnav li a:hover, ul#subnav li a:active {
    background-color: inherit;
    color: #000;
}

ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #303030;
}

ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #000;
}
/* END NAV */

why doesnt the main content float to the left of the image?
any help is appreaciated
 

compwhizii

Banned
Messages
779
Reaction score
0
Points
0
This is not an issue with hosting, so I've moved it to Programming help.
 

freecrm

New Member
Messages
629
Reaction score
0
Points
0
After a quick look, there is no css defined for the content.

Secondly, this is doing exactly what you are telling it to. You're not using absolute positions so...

float the image to the left...done

THEN comes the content!

If you want the main content to float to the left of the image, set the content first and then set #test to float to the left of that.

(If I've understood your question!)
 
Last edited:

vol7ron

New Member
Messages
434
Reaction score
0
Points
0
Yes, what exactly are you asking, you aren't too clear on what you want.
 
Top