/u/85011/crop65747d648e683_cropped.png?f=community)
Ik wil een website ontwerp volgens onderstaande afbeelding:
De 2 gele divs moeten van gelijke grootte zijn en zorgen dat het geheel in de breedte van het browser venster uitgevuld wordt.
De overige divs hebben een vaste breedte.
Nu heb ik vele voorbeelden op internet gevonden, maar niets wat mij helpt met mijn ontwerp. Ik heb tot nu toe het volgende, echter daarna loop ik vast:
De oplossing met negatieve margins en width 50% geeft met een div aan de linker zijde gelijk een probleem, dat namelijk het rechter gele vak niet gelijk is aan het linker gele vak. Tevens moeten er dus nog 4 smalle divs bijkomen. (In bovenstaand voorbeeld worden andere breedtes gebruikt als in het definitieve ontwerp)
Wie kan mij verder op weg helpen?
De 2 gele divs moeten van gelijke grootte zijn en zorgen dat het geheel in de breedte van het browser venster uitgevuld wordt.
De overige divs hebben een vaste breedte.
Nu heb ik vele voorbeelden op internet gevonden, maar niets wat mij helpt met mijn ontwerp. Ik heb tot nu toe het volgende, echter daarna loop ik vast:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <html> <head> <title>Untitled Document</title> <style type="text/css"> Body { margin: 0px 0px 0px 0px; } #main { min-width: 700px; margin:0; padding:0; background-position: top center; } #left-side-outer { width:50%; float:left; margin-right:-50px; min-height: 100px; } #left-side{ margin-right:50px; background-color: #FF9900; min-height: 100px; } #center-column { width:100px; float:left; color: #FFFFFF; background-color: #000000; position:relative; z-index:10; min-height: 100px; } #right-side-outer { width:50%; float:right; margin-left:-311px; min-height: 100px; } #right-side { margin-left:310px; min-height: 100px; background-color: #FF9900; } #header{ clear:both; height: 100px; text-align: center; background-color: #CC0000; } #left { float:left; width: 260px; height: 200px; text-align: center; background-color: #00aa00; } </style> </head> <body> <div id="header"></div> <div id="left"></div> <div id="main"> <div id="left-side-outer"> <div id="left-side"> </div> </div> <div id="center-column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div id="right-side-outer"> <div id="right-side"> </div> </div> </div> </body> </html> |
De oplossing met negatieve margins en width 50% geeft met een div aan de linker zijde gelijk een probleem, dat namelijk het rechter gele vak niet gelijk is aan het linker gele vak. Tevens moeten er dus nog 4 smalle divs bijkomen. (In bovenstaand voorbeeld worden andere breedtes gebruikt als in het definitieve ontwerp)
Wie kan mij verder op weg helpen?
Home Assistant | Unifi | LG 51MR.U44 | Volvo EX30 SMER+ Vapour Grey, trekhaak | SmartEVSE V3 | Cronos Crypto.com
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
:strip_exif()/u/295549/crop56eca4759ac3c_cropped.gif?f=community)
:strip_icc():strip_exif()/u/219593/lamas_60x60icon.jpg?f=community)
Net als de min-variant.