help with float:left; attribute

dellerdynamics · Dec 12, 2008

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 · Dec 12, 2008

This is not an issue with hosting, so I've moved it to Programming help.

freecrm · Dec 12, 2008

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

vol7ron · Dec 12, 2008

Yes, what exactly are you asking, you aren't too clear on what you want.

help with float:left; attribute

dellerdynamics

New Member

compwhizii

Banned

freecrm

New Member

vol7ron

New Member

Free Web Hosting

Our Community

Legal