SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: FLOAT question

  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    FLOAT question

    Ok, so I havent been able to solve this clear issue, so maybe it's a float problem.

    Why are float and clear applied to SPECIFIC RULES.. affecting the WHOLE PAGE.
    I mean if i have a UL with all its LIs floated left. why is the NEXT element OUTSIDE the UL place directly to the right of the last LI?

    I thought a UL was a block element and would serve as a container for the floated LIs. On a related matter , if I solve this problem by addinga clearing element, then it clears the entre page, not just the LIs, UL or the element containing the UL ...

    please help...


    CSS


    ul.res_choice li{float: left; background-color: red}
    .res_choice li { padding: 0 10px 0 0 ; width: 20%; }
    .res_choice li div { font-size: 11px; visibility: hidden }
    .res_choice a span { color: #557291; font-family: "Arial Black"; display: block; padding: 26px 0 4px 45px; width: 100%; height: 16px }
    .res_choice a:hover span {color:#c87500;}
    .res_choice a:hover div {visibility: visible}

    #acro img { padding: 0 12px 2px 0; vertical-align: middle; border: 0 }



    MARK-UP

    <div class="dl_cont_style">
    <ul class="res_choice" >
    <li id="TXT_c">
    <a href="#">
    <span>TXT</span>
    <div>This format is...</div>
    </a>
    </li>
    <li id="DOC_c">
    <a href="#">
    <span>DOC</span>
    <div>This format is ...</div>
    </a>
    </li>
    <li id="PDF_c" >
    <a href="#">
    <span>PDF</span>
    <div>The best way to..</div>
    </a>
    </li>
    <div class="clr"></div>
    </ul>
    <p id="acro"><a href="#"><img src="images/acrobat.gif" ></a>If you don't have Acrobat ... <a href="#" >here.</a></p>

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I thought a UL was a block element and would serve as a container for the floated LIs.
    Well maybe, but block elements aren't supposed to contain their floated children. Giving your UL a rule of "overflow:hidden" will make it contain it's floated children. I don't know if that will solve your problem, though.
    Ed Seedhouse

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    a div is a block element tho, as is a ul.

    I have managed to weirdly solve the problem by FLOATING the CONTAINER...

    Tho I still dont understand why it works.

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    <div class="dl_cont_style">
    <ul class="res_choice" >
    <li id="TXT_c">
    <a href="#">
    <span>TXT</span>
    <div>This format is...</div>
    </a>
    </li>
    ............................
    I would replace the div with another span or if its strongly emphasizing data a strong tag. This way you can pass validation.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    <ul>
    <li><a><span></span><div></div></a></li>
    <li></li>
    <div></div>
    </ul>

    As posted, this code is not correct. You cannot have a <div> within a <ul> (or am I missing something in your code?). You also cannot have a <div> encapsulated with an <a> Tag?

    You need to rethink the CSS

    li { display:block;float:left }
    .clr { clear:both }

    <ul>
    <li><a>Txt <span>More txt</span> and Txt</a></li>
    <li>Txt</li>
    </ul>
    <div class="clr"></div>

    Is correct (although I agree that the <div class="clr"></div> at the end is a fudge rather than a fix.

    Initially I looked at your post and thought the problem would be related to floating a <div> after the <ul>, floating makes the object behave in an inline manner, if it fits, it floats.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    normally I wouldnt put a div in a list, but the div is a hidden roll over dropdown.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Doesn't matter, make it an hidden nested list, it's always invalid to put a div in a li element???

    so:

    <ul>
    <li class=nav1>
    <ul style=display:hidden>
    <li>ITEM</li>
    <li>ITEM2</li>
    </ul>
    </li>
    </li>

    Could work (and does), you are going wrong by mixing your metaphors...

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    done it.. thank you so much for helping me VALIDATE...


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
  •