Elternelement umschließt Child-Elemente trotz clear:both; nicht

  • HTML

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    Elternelement umschließt Child-Elemente trotz clear:both; nicht

    Guten Tag,

    Kann mir jemand erklären warum trotz gesetztem "clear:both;" das Elternelement <div id="ebaytemplate"> die Child-Elemente nicht umschließt, bzw. höhe 0px hat?
    Ich bin grad am verzweifeln und noch nicht so geübt in floats. ?( ;(

    HTML:

    HTML-Quellcode

    1. <div id="ebaytemplate">
    2. <link rel="stylesheet" type="text/css" href="http://bstrading.de/skin/frontend/rwd/bstrading/css/ebay.css">
    3. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600">
    5. <div id="content">
    7. <div class="boxheader">
    8. <div id="logo">
    9. <img src="http://bstrading.de/skin/frontend/rwd/bstrading/images/Logo.png" width="380" style="float:left;">
    12. </div>
    13. <div style="clear:both;"></div>
    16. <div id="menue">
    17. <div class="input-box">
    19. <form class="suchen" method="GET" action="http://stores.ebay.de/bstradingde" style="display:inline;">
    20. <input id="search" type="search" name="_nkw" value="" class="input-text required-entry" maxlength="128" placeholder="Den gesamten Shop durchsuchen..." autocomplete="off">
    21. <button type="submit" title="Suche" class="button search-button"><span><span>Suche</span></span></button>
    22. </form>
    26. </div>
    27. <div id="headerinfo">
    28. <a class="link_navigation_oben" href="http://my.ebay.de/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=bstradingde&ssPageName=STRK:MEFS:ADDSTR&rt=nc">Newsletter abonnieren</a>
    30. <a class="link_navigation_oben" href="http://my.ebay.de/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=bstradingde&ssPageName=STRK:MEFS:ADDSTR&rt=nc">Shop speichern</a>
    32. </div>
    34. </div>
    38. </div>
    40. <div id="middle">
    41. <div id="info">
    43. <div id="picture" >
    44. <div width="100%">
    45. #media_gallery[440,,,2,row,0,"",]#
    46. </div>
    47. </div>
    48. <div id="shortinfo">
    49. <div class="product-name">
    50. <span class="h1">#value[title]#</span>
    51. </div>
    53. <div class="short-description">
    54. <div><p>#short_description#</p></div>
    55. </div>
    57. <div class="delivery">
    59. <div style="float: left; margin: 5px; margin-top:10px;">
    60. <img src="http://bstrading.de/skin/frontend/rwd/bstrading/images/logistics2.png" alt="delivery" width="64" height="64" />
    61. </div>
    63. <div style="float: left; line-height:1; margin-top: 15px; margin-left: 10px;">
    64. <p><span style="font-size: 18px; line-height:1.5;"><b>Lieferung als Email</b></span></p>
    65. <p><span style="font-size: 16px; ">Die Lieferung erfolgt i.d.R. in wenigen Minuten!</span></p>
    66. <p><span style="font-size: 8px;">Wir behalten uns vor einzelne Bestellungen zur Pr&uuml;fung zur&uuml;ckzuhalten.</span></p>
    67. </div>
    69. </div>
    72. <div id="pricebox">
    74. <span>#value[buy_it_now_price]#</span>
    75. <a href="http://offer.ebay.de/ws/eBayISAPI.dll?BinConfirm&amp;item=291362230418" target="_top">Sofort kaufen</a>
    77. </div>
    79. </div>
    80. </div>
    81. <div id="description">
    82. #description#
    83. </div>
    85. </div>
    87. </div> <div style="clear:both;"></div>
    88. </div>
    90. <div style="clear:both;"></div>

    benediktsamuel schrieb:

    <div id="ebaytemplate">
    <link rel="stylesheet" type="text/css" href="http://bstrading.de/skin/frontend/rwd/bstrading/css/ebay.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600">


    Verweise auf CSS-Dateien gehören in den <HEAD> Bereich. Ist dein Code nur ein Auszug oder alles?

    Schau auch mal hier rein
    css-technik.de/css-examples/219_9/

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Murdock“ ()

    Hi,

    - mach das mal auf display: block; und setze overflow: hidden; und ggf. height: auto;.
    - Und mach deine CSS-Includes in den <head> (wie Murdock schon sagte).
    - Beste Lösung: Anstatt das Logo zu floaten könntest du's absolut positionieren, wenn dein übergeordnetes Element relativ positioniert ist. Und wieso eigentlich ein <div> um das Logo, ist ja überflüssig wenn du dein <img> mit display: block; ebenfalls Zeilen-füllend machen kannst (was im übrigen ebenfalls überflüssig ist, wenn es absolut positioniert wird). Je nachdem kannst du das Logo dann mit z-index immer noch an oberste Ebene schieben.

    Link :thumbup:
    Hello World