login  Naam:   Wachtwoord: 
Registreer je!
 Forum

center div volledige breedte laten innemen

Offline killerwhale6 - 20/07/2006 16:26
Avatar van killerwhale6Nieuw lid hoi,

ik ben mijn eerste stappen aan het wagen om tabel-layout te vervangen door DIVs.

Nu heb ik een linker div, daarnaast een met een tekst en daarnaast nog een. De linkse en de rechtse hebben een vaste width. De middelste moet de rest van de breedte innemen, maar hier gaat het fout, want die blijft maar zo groot als de tekst die erin staat. Heb al geprobeerd met width=100%, maar dan verschuift heel de layout dooreen.

Iemand een idee?

thanks!

8 antwoorden

Gesponsorde links
Offline Thomas - 20/07/2006 16:34
Avatar van Thomas Moderator Heb je het volgende al geprobeerd (weet niet of dat werkt):
float de linker div links, float de rechter div rechts, en zet bij deze laatste div een clear-attribuut en laat de middelste div ook left floaten?
Wat is "de rest van de breedte"? De volledige schermbreedte (100%) minus de breedte van de linker- en rechterdiv?
Offline killerwhale6 - 20/07/2006 16:43 (laatste wijziging 20/07/2006 18:42)
Avatar van killerwhale6 Nieuw lid die clear schijnt niets te veranderen.

de rest van de breedte is idd schermbreedte - (links + rechts)

iemand een ideetje?
Offline Grayen - 20/07/2006 18:42
Avatar van Grayen PHP ver gevorderde kheb hier wat gevonden:

http://www.shad...wo-Columns

als dit niet is wat je zoek dan op google naar fluid div etc. fluid is namelijk dat hij de rest van de breedte inneemt 
Offline killerwhale6 - 20/07/2006 18:58 (laatste wijziging 20/07/2006 19:00)
Avatar van killerwhale6 Nieuw lid werkt nog steeds niet. Ik heb nu dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.left {
  2. 	float: left;
  3. 	width: 150px;
  4. }
  5.  
  6. div.center {
  7. 	margin: 0px 175px 0px 175px;
  8. }
  9.  
  10. div.right {
  11. 	float: right;
  12. 	width: 150px;
  13. }


de rechter div staat lager dan de andere 2. Als ik de center div echter ook float, dan komen ze wel allemaal op 1 lijn, maar is de center niet meer 100% in width.
Offline Grayen - 20/07/2006 19:10
Avatar van Grayen PHP ver gevorderde http://www.posi...mplex.html

zo kan het ook
Offline killerwhale6 - 20/07/2006 19:56
Avatar van killerwhale6 Nieuw lid ik geraak er niet aan uit hoor. Als ik met een extra container werk, dan gebeurt binnen die container net hetzelfde.
Offline xSc - 21/07/2006 10:55
Avatar van xSc Onbekend Je hebt een position nodig, wanneer je float gebruikt:

position: relative;
float: left;

absolute positie zou ook kunnen, maar dat is niet altijd even handig.

Met een float plaats je elementen naast elkaar. De rechtse div behoeft niet per se float: right te hebben. Met float: left komt 'tie er ook naast. De clear zorgt ervoor dat het element eronder komt:

clear: both; (both is left en right)
clear: left; ('breekt' uit de linker float)
clear: right; ('breekt' uit de rechter float)
Offline killerwhale6 - 21/07/2006 16:58 (laatste wijziging 21/07/2006 18:39)
Avatar van killerwhale6 Nieuw lid ok, ik heb nu dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.left {
  2. 	float: left;
  3. 	width: 150px;
  4. 	position: relative;
  5. }
  6.  
  7.  
  8.  
  9. div.center {
  10. 	margin: 0px 10px 0px 10px;
  11. 	float: left;
  12. 	position: relative;
  13. }
  14.  
  15.  
  16. div.right {
  17. 	width: 150px;
  18. 	float: left;
  19. 	position: relative;
  20. }


Maar de center div neemt nog steeds niet de volledige beschikbare breedte in; die is slechts zo breed als de tekst die erin staat.

EDIT:
ok ik heb het:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.left {
  2. 	float: left;
  3. 	width: 150px;
  4. }
  5.  
  6. div.center {
  7. 	margin: 0px 175px 0px 175px;
  8.  
  9. }
  10.  
  11. div.right {
  12. 	width: 150px;
  13. 	float: right;
  14. }


Belangrijk hierbij is de center div te plaatsen NA de right div!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.199s