Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Prawy DIV dopasowujący się do szerokości przegladarki
Forum PHP.pl > Forum > Przedszkole
AboutMe
Załóżmy że przeglądarka ma wewnętrzną szerokość 1400px. Jak zrobić lewy DIV ze stałą szerokością np. 1000px a prawy DIV automatycznie dopasowujący się do wewn. szerokości przeglądarki czyli w tym wypadku 400px. Prawy DIV jest pusty, wyświetla tylko tło. Da się takie coś zrobić bez użycia javascript?
ciekawskiii
width: 100%; ?
naitsabes
a nie lepiej wrzucic ten lewy div do jakiegos glownego i width:auto ? kiedys mialem z tym problem musisz poczytac tutaj http://htmlhelp.shl.pl/artykuly/artykul.php?nr=1002
AboutMe
Zapomniałem dodać że chciałbym żeby lewy div był w kolorze tła body, tło body to obrazek o szerokości 1000px. W poniższym przykładzie ustawiłem kolor czerwony:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  
  4. <style type="text/css">
  5. body { background:red; }
  6. #header { width:100%; }
  7. #header-child { width:1000px; float:left; }
  8. #header-child2 { height:100px; width:auto; background:yellow; }
  9.  
  10. <div id="header">
  11.  
  12. <div id="header-child2">
  13. <div id="header-child">
  14. Ut quis pharetra augue. Nunc tincidunt varius tincidunt. Praesent sollicitudin sem ac mi vestibulum volutpat. Duis porttitor libero non libero dignissim sagittis. Vivamus ultrices consequat nibh, eget sodales lorem eleifend vel. Praesent iaculis ornare laoreet. Cras bibendum elit tincidunt tellus malesuada ut hendrerit tellus malesuada. In hac habitasse platea dictumst. Curabitur rutrum laoreet enim ut bibendum. Ut auctor diam eget velit tempor at mollis eros auctor. Ut dignissim vulputate pharetra. Integer vel mattis nunc. Integer elit sem, imperdiet non rhoncus non, sodales ut ligula. Aenean mauris turpis, suscipit nec tempus sed, sollicitudin ut eros. Ut in ornare neque. Mauris eu ipsum magna. Proin sed sem odio. Donec sed volutpat elit. Pellentesque quam justo, rhoncus ut luctus quis, sollicitudin quis enim.
  15. </div><!--header-child ends-->
  16.  
  17.  
  18. </div><!--header-child2 ends-->
  19.  
  20. </div><!--header ends-->
  21.  
  22. </body>
  23. </html>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.