1. #1
    passero's Avatar
    Registered
    28/11/03
    Location
    Drongen
    Posts
    6,665
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/28

    3 Divs, 1 onbekende breedte

    Voor een portal kunnen we layouts schrijven. Die layouts zijn lege pagina's met gewoon enkele divs in gedefinieerd.
    Nu, ik wil een layout maken waarbij je 3 divs hebt op 1 rij. De eerste 200px breed, de middelste onbekend en de 3de ook 200px. Samen moeten ze wel 100% van de browser hebben.

    HTML Code:
    <div style="width:200px;display:inline;">Linker div</div>
    <div style="display:inline;">Midden div</div>
    <div style="width:200px;display:inline;">Rechter div</div>
    Zo iets werkt maar dan is de middenste afhankelijk van de content en hij moet een grote hebben die gewoon schermvullend is.

    Nu, ik ben developer en qua css ken ik wel de basis maar blijkbaar zo goed ook weer niet
    Iemand die me op de goeie weg kan helpen om dit te doen?
    no votes  

  2. #2
    demon326's Avatar
    Registered
    18/04/03
    Location
    Hasselt
    Posts
    14,855
    iTrader
    23 (100%)
    Mentioned
    0 Post(s)
    Reputation
    10/79
    Quote Originally Posted by passero View Post
    This quote is hidden because you are ignoring this member. Show
    Voor een portal kunnen we layouts schrijven. Die layouts zijn lege pagina's met gewoon enkele divs in gedefinieerd.
    Nu, ik wil een layout maken waarbij je 3 divs hebt op 1 rij. De eerste 200px breed, de middelste onbekend en de 3de ook 200px. Samen moeten ze wel 100% van de browser hebben.

    HTML Code:
    <div style="width:200px;display:inline;">Linker div</div>
    <div style="display:inline;">Midden div</div>
    <div style="width:200px;display:inline;">Rechter div</div>
    Zo iets werkt maar dan is de middenste afhankelijk van de content en hij moet een grote hebben die gewoon schermvullend is.

    Nu, ik ben developer en qua css ken ik wel de basis maar blijkbaar zo goed ook weer niet
    Iemand die me op de goeie weg kan helpen om dit te doen?
    Helpt dit mss; Three column liquid layout | Max Design ? Daar kunt ge al wat mee spelen...
    no votes  

  3. #3
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    Kan je niet gewoon je middelste div een width van 100% geven? Al lijkt die link van benny wel hetgeen te zijn dat je zoekt.
    no votes  

  4. #4
    passero's Avatar
    Registered
    28/11/03
    Location
    Drongen
    Posts
    6,665
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/28
    ok bedankt ik zal het eens bekijken.
    no votes  

  5. #5
    Albireo's Avatar
    Registered
    21/10/05
    Location
    Herentals
    Posts
    1,515
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    2/13
    Dit is het simpelste dat ik kon bedenken. Het uitgangpunt is dat een div (en elk block-element) standaard altijd even breed is als het element waarin het vervat zit, dus dat is perfect voor je middenkolom. Vervolgens heb ik left- en right-margins ingesteld zodanig dat daar plaats komt voor je linker- en rechterkolom die je daar kunt plaatsen met float. Let wel dat je rechterkolom in je html-code voor de middenkolom komt.

    CSS:
    Code:
    			#links,#rechts {
    				width: 200px;
    				background-color: #CCCCCC;
    			}
    			#links {
    				float: left;
    			}
    			#rechts {
    				float: right;
    			}
    			#midden {
    				margin-left: 200px;
    				margin-right: 200px;
    				background-color: #666666;
    			}
    HTML:
    Code:
    		<div id="links">links</div>
    		<div id="rechts">rechts</div>
    		<div id="midden">midden</div>
    Last edited by Albireo; 14-03-2010 at 11:50.
    "And we wept, Precious. We wept to be so alone." --- Gollum
    "Sometimes there are no words. No clever quotes to neatly sum up what happened that day. Sometimes, the day just . . . ends." --- Hotch (Criminal Minds)
    no votes  

  6. #6
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    works like a charm!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in