SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with Floats

    I'm trying to make a page where I have a bulleted list on the left with an image to the right of the list. I have 4 different bulleted lists on the page.

    The problem arises after I "clear" the 2nd list which nicely forms a new row, like I want. When I try to float the 2nd image (Med-Dog.jpg) to the right of the 2nd list, the browser tries to put it to the right of the 1st image in the "1st row."

    How can I make it so the 2nd image stays in the 2nd row to the right of the list?



    Code:
    <div style="float:left;">
       <ul>
         <li style="margin-left: -3em; list-style-type:none;"><strong>Small Crate</strong></li>
           <li>Cats</li>
           <li>Chihuahua</li>
           <li>Maltese</li>
           <li>Pomeranian</li>
           <li>Shih Tzu</li>
           <li>Silky Terrier</li>
       </ul>
       </div>
    
    
    <div style="float:left">
          <img src="Small-Dog.jpg" alt="Small Dog">
    </div>
     
    
      
    
    <div style="float:left; clear:left">
    <ul>	
    <li style="margin-left: -3em;"><strong>Medium Crate</strong></li>
        <li>Beagle</li>
        <li>Bulldog
        <li>Cairn Terrier</li>
        <li>Cats</li>
        <li>Chihuahua</li>
        <li> Chow Chow</li>
        <li>Cocker Spaniel</li>
        <li>Dalmatian</li>
        <li> Lhasa Apso</li>
        <li>Maltese</li>
        <li>Miniature Poodle</li>
        <li>Pekingese</li>
        <li>Pomeranian</li>
        <li>Pug</li>
        <li>Shar-Pei</li>
        <li>Shih Tzu</li>
        <li>Silky Terrier</li>
        <li>Toy Poodle</li>
        <li>West Highland White Terrier</li>
    </ul>
    </div>
    
    
    <div style="float:left;">
          <img src="Med-Dog.jpg" alt="Medium Dog" style="float:left;">
    </div>

  2. #2
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nobody has an answer?

    I just want to know how to place images to the right of the left DIV and then adjust the spacing both horizontally and vertically from there.

    Thanks.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe putting each list and image in thier own container box? Such as:
    Code:
    <div style="width: 50%;">
    <div style="float:left;">
       <ul>
         <li style="margin-left: -3em; list-style-type:none;"><strong>Small Crate</strong></li>
           <li>Cats</li>
           <li>Chihuahua</li>
           <li>Maltese</li>
           <li>Pomeranian</li>
           <li>Shih Tzu</li>
           <li>Silky Terrier</li>
       </ul>
       </div>
    
    
    <div>
          <img src="Small-Dog.jpg" alt="Small Dog">
    </div>
    </div>
    Joe

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're misusing the lists. You should put the title in a header element, e.g. <h2>, before the list, not as a styled first item in the list.

    Why do you need a <div> around the <img>? Why can't you just float the image?

    It sounds like you're only testing in IE.

    To do this in IE, you'll either have to add an extra element after each <img> to give clear:left to, or you'll need to put a <div> wrapper around each list and image pair and apply clear:left to the wrappers.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is a float called for here?

    Hi,

    I have a form located at the botom of the right hand navigation column. I have it as "position: absolute" right now. The problem is, if I change resolutions, it moves out of position.

    I tried making the form a "float: left" and used a clear property, but I don't really quite understand this concept yet and it doesn't seem to be working for me.

    If you click on the link, it will show you the form using the "absolute" positioning.

    Any thoughts on the best way to handle this? I'm trying to get away from the absolute positioning, but can't seem to get the float way to work for me.

    http://www.sitesbysarah.com/bailey/main.htm

    here is my css code:

    /* CSS Document */

    * { padding: 0; margin: 0; }

    body {
    margin: 0;
    padding 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background: #006699;
    }


    #wrapper {
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    width: 922px;
    }


    #header {
    width: 900px;
    float: left;
    background-image: url(images/banner_900px.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    height: 190px;
    padding: 10px 0px 0px 0px;
    margin: 10px 0px 0px 0px;
    border-bottom: 35px solid #006699;
    }

    #corner_logo {
    position: absolute;
    top: 11px;
    left: 675px;

    }


    h1 {
    font-size: 1em;
    color: #006699;
    font-weight: bold;
    padding: 0 0 0 19px;
    margin-bottom: 15px;
    }


    a:link {
    color: #006699;
    text-decoration: underline;
    }

    a:visited{color: #006699;
    text-decoration: underline;
    }
    a:hover{color: #fff;
    text-decoration: none;}

    p {
    color: #006699;
    padding: 0 20px;
    }




    #leftcolumn {
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
    margin: 0px 1px 5px 0px;
    padding: 10px;
    width: 195px;
    height: 950px;
    float: left;
    }

    #leftnav {
    text-decoration: none;
    }


    #leftcolumnnav ul , #leftnav ul li{margin:0;}
    #leftcolumnnav ul li a {display:block;padding:5px 18px;}



    #leftnav ul {
    list-style: none;
    margin-bottom: 10px;
    }

    #leftnav li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 5px;

    }

    #leftnav li a:link {
    display: block;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }

    #leftnav a:visited{
    color: #fff;
    text-decoration: none;
    }



    #leftnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;

    }


    .leftsubtitle {

    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    .topleftsubtitle {

    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    text-decoration: none;
    }




    #content {
    float: left;
    border: 2px solid #fff;
    background-image:url(images/content_bkgd_tile_gif.gif);
    background-repeat: repeat;
    background-color: #D4E4FA;
    height: 948px;
    margin: 0px 1px 5px 0px;
    padding: 10px;
    width: 435px;
    display: inline;

    }


    #rightcolumn {
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom:1px solid #fff;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    background-color: #6ba7eb;
    margin: 0px 0px 5px 0px;
    padding: 10px;
    width: 195px;
    float: left;
    height: 950px;
    }

    #rightcolumnnav {
    background-color: #6ba7eb;
    }


    #rightcolumnnav ul , #rightcolumnnav ul li{margin:0;}
    #rightcolumnnav ul li a {display:block;padding:5px 8px;}

    #rightcolumnnav {

    padding: 0px;
    margin: 0px;
    width: 100%;
    }



    #rightcolumnnav ul {
    list-style: none;
    margin: 0px;
    padding: 0;

    }

    #rightcolumnnav li {
    margin-bottom:0px;
    border-bottom: 1px solid #fff;
    }

    #rightcolumnnav li a:link {
    display: block;
    padding-left 5px;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }

    #rightcolumnnav a:visited{
    color: #fff;
    text-decoration: none;
    }



    #rightcolumnnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    }

    .rightcolumnnav_static_items {
    background-color: #D4E4FA;
    color: #006699;
    padding: 5px 12px;
    }



    .toprightcolumnsubtitle
    {
    background: #015A9E;
    padding: 5px 5px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    border-top: 1px solid #fff;
    }


    .rightcolumnsubtitle
    {
    background: #015A9E;
    padding: 10px 10px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    }




    #form {
    position: absolute;
    top: 940px;
    left: 735px;
    color: #fff;
    font-weight: bold;

    }



    #disclaimer {
    font-size: .8em;
    text-align: center;
    font-style: italic;
    line-height: 1.2;
    margin-top: 50px;
    }

    #ad {
    font-size: .9em;
    width: 280px;
    padding: 5px;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
    font-size: .9em;

    }

    #address {
    position: absolute;
    top: 213px;
    left: 100px;
    width: 800px;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    text-align: center;
    }

    #address a:link {
    color: #fff;
    text-decoration: none;
    }

    #address a:visited{color: #fff;
    text-decoration: none;
    }

    #address a:hover{
    color: #D4E4FA;
    text-decoration: underline;}





    /*Navigation on download page */

    #downloadnav {
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #D4E4FA;
    text-align: center;
    padding: 20px 0 0 70px;
    }

    #downloadnav ul {
    list-style: none;
    margin: 9px;


    }

    #downloadnav li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #fff;


    }

    #downloadnav li a {
    display: block;
    padding-left: 10px;
    background-color: #6699FF;
    color: #fff;
    text-decoration: none;
    }

    #downloadnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    }


    #footer {
    width: 900px;
    clear: both;
    color: #fff;
    background: #006699;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    }


    Thanks,
    Sarahb

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I thought I was starting a new thread. Don't know how I did that..

    Sarahb


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •