login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div onder uitlijnen

Offline lau - 03/01/2008 22:54
Avatar van lauHTML interesse ik heb 1 div container en 2 divjes die daarin liggen.
Linkse div moet gewoon links liggen met een bepaalde breedte.
Rechtse div moet rechtsonder liggen t.o.v. linkse div.
Ofwel... ik heb het geprobeerd om div container een vertical-align: bottom te geven, maar dit werkt niet.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#startcontainer { /*container*/
  2. 	margin: 0 0 20px 0;
  3. 	padding: 0;
  4. 	width: 517px;
  5. 	border: 0;
  6. }
  7. div#introcontent { /*linkse div*/
  8. 	text-align: left;
  9. 	margin: 0;
  10. 	padding: 0 20px 0 0;
  11. 	width: 320px;
  12. 	border-right: 3px solid #4176C4;
  13. 	float: left;
  14. 	font-size: 11px;
  15. }
  16. div#ondertekening { /*rechtse div*/
  17. 	text-align: left;
  18. 	padding: 0 0 0 20px;
  19. 	width: 154px;
  20. 	border: 0;
  21. 	float: right;
  22. 	font-style: italic;
  23. 	font-size: 11px;
  24. 	margin: 0;
  25. 	border-left: 3px solid #4176C4;
  26. }

3 antwoorden

Gesponsorde links
Offline vinTage - 04/01/2008 00:19 (laatste wijziging 04/01/2008 00:28)
Avatar van vinTage Nieuw lid Ik snap je vraag niet zo goed, maar als ik je css test, dan lijkt het toch aardig op wat jij wilt ?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  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">
  4. <title>blaat</title>
  5. <style type="text/css">
  6. div#startcontainer { /*container*/
  7.     margin: 0 0 20px 0;
  8.     padding: 0;
  9.     width: 517px;
  10.     border: solid 1px black; /*testing only*/
  11. }
  12. div#introcontent { /*linkse div*/
  13.     text-align: left;
  14.     margin: 0;
  15.     padding: 0 20px 0 0;
  16.     width: 320px;
  17.     border-right: 3px solid #4176C4;
  18.     float: left;
  19.     font-size: 11px;
  20. }
  21. div#ondertekening { /*rechtse div*/
  22.     text-align: left;
  23.     padding: 0 0 0 20px;
  24.     width: 154px;
  25.     border: 0;
  26.     float: right;
  27.     font-style: italic;
  28.     font-size: 11px;
  29.     margin: 0;
  30.     border-left: 3px solid #4176C4;
  31. }
  33. </head>
  35. <div id="startcontainer">
  36.   <div id="introcontent">links</div>
  37.   <div id="ondertekening">rechts</div>
  38. 	<div style="clear:both;"></div>
  39. </div>
  40. </body>
  41. </html>


een clear erbij gegooit (en een test bordertje)


edit, ah ik zie net dat je op een ander forum ook deze vraag had gesteld en daar had je al een clear erbij zitten....

Dan begrijp ik je vraag gewoon niet 

edit2: daar nog eens gereageerd (iets anders)
Offline patje17 - 04/01/2008 08:37 (laatste wijziging 04/01/2008 16:21)
Avatar van patje17 Nieuw lid Het is niet moeilijk hoor!

De linkse div geef je een Float="left" en de Width="100" die je wilt hebben.
De rechtse div geef je een Float="right" en de Width="1200" die je wilt hebben.
Die linker is dan zo breed als je em wilt hebben en de rechter staat rechts maar omdat de breedte (in principe) niet klopt, omdat ie te breed is voor je scherm. Daarom valt ie rechtsonder de andere div!!

Het is slim om die rechterdiv een vrij hoge Width te geven, zodat mensen met een grote resolutie het ook zien met linksboven en rechtsonder!! 

Het lijkt ingewikkeld maar valt wel mee hoor

Ow en vergeet in je htmlcode onder de div's

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="left"></div>
  2. <div id="right"></div>
  3.  
  4. <div style="clear:both"></div>

(als je dit er niet onder zet dan gaan je andere div's raar doen!!)

SUCCES!

Citaat:
PieterC Edit: zucht...gebruik de codetags...
Offline Vincjenzo - 04/01/2008 09:24
Avatar van Vincjenzo Nieuw lid Volgens mij kan je het beter zo doen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. div {
  8. 	border:1px solid black;
  9. }
  11. </head>
  12.  
  14. <div>
  15. 	<div style="float:left;">links</div>
  16. 	<div style="clear:both;"></div>
  17. 	<div style="float:right;">rechts</div>
  18. </div>
  19. </body>
  20. </html>


Dan weet je zeker dat het rechts onder de linker div zit, wat de resolutie ook is.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.206s