css problem

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • css problem

    Hallo,

    Unzwar habe ich ein 2 Spalten Design in HTML5.
    Leider habe ich das Problem das sich, sobald die Rechte Splte größer als die Linke ist sich der Text in der Rechten spalte unter die Linke schiebt.
    Ich habe nun alles versucht und komme nicht weiter.

    Könntet ihr mir dabei helfen?

    Quellcode

    1. <div class="s_container">
    3. <section class="left_box">
    4. <aside>
    5. <ul>
    6. <li>text</li>
    7. </ul>
    8. </aside>
    10. </section>
    12. <section>
    13. <h2>{$NAME} </h2>
    16. <form method="post" action="contact.php">
    17. <fieldset>
    18. <legend>{$LANG.YOU_COSTUMER}</legend>
    20. <div>
    21. <label for="name" accesskey="U">{$LANG.NAME}</label>
    22. <input name="name" type="text" id="name" required="required" />
    23. </div>
    24. <div>
    25. <label for="street" accesskey="U">{$LANG.STREET} <small>(optional)</small></label>
    26. <input name="street" type="text" id="street" />
    27. </div>
    28. </fieldset>
    29. <input type="submit" class="send" name="send" value="{$LANG.SEND}">
    30. </form>
    31. </section>
    33. </div>
    Alles anzeigen


    Quellcode

    1. .s_container {
    2. position:relative;
    3. margin:0 auto;
    4. width:960px;
    5. padding-top: 40px;
    6. }
    8. .s_container label {
    9. display: inline-block;
    10. float: left;
    11. height: 1em;
    12. line-height: 1em;
    13. padding: 6px 5px 0;
    14. width: 155px;
    15. margin: 5px 0;
    16. clear: both;
    17. }
    19. .s_container input, .s_containert textarea, .s_container select {
    20. width: 220px;
    21. padding: 5px;
    22. color: #666;
    23. background: #f5f5f5;
    24. border: 1px solid #ccc;
    25. margin: 5px 0;
    26. font: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    27. -webkit-border-radius:5px;
    28. -moz-border-radius:5px;
    29. border-radius:5px;
    30. vertical-align: top;
    32. transition: all 0.25s ease-in-out;
    33. -webkit-transition: all 0.25s ease-in-out;
    34. -moz-transition: all 0.25s ease-in-out;
    36. box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    37. -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    38. -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    39. }
    42. .s_container textarea {
    43. width: 414px;
    44. }
    46. .s_container legend { padding:7px 10px; font-weight:bold; color:#000; margin-bottom:0 !important; margin-bottom:20px; }
    Alles anzeigen
    Bilder

    • design.png

      13,59 kB, 1.460×268, 324 mal angesehen