Note that in this exercise, we??™ll
only be floating divs left, but you can float them right, too. Regarding width
values, you must ensure that their sum doesn??™t exceed 100%, because otherwise the
divs will be wider in total than their container and will display in a linear fashion,
one under the other.
#divOne {
background: #dddddd;
float: left;
width: 40%;
}
#divTwo {
background: #aaaaaa;
float: left;
width: 60%;
}
Manipulating two structural divs for liquid layouts
PAGE LAYOUTS WITH CSS
285
7
3. Add a margin. In the previous exercise, a margin was included to separate the two
divs. This can be done here, again by adding a margin-right value to #divOne.
However, you need to ensure the overall width of the width and margin values
doesn??™t exceed 100%. In this example, the margin is set to 2%, and 1% is removed
from each of the two width values to cater for this.
#divOne {
background: #dddddd;
float: left;
width: 39%;
margin-right: 2%;
}
#divTwo {
background: #aaaaaa;
float: left;
width: 59%;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
286
4. If you want to add padding to the divs, the method changes depending on the
required value. If you??™re adding padding on a percentage basis, you add it in the
same way as the margin in step 3, removing relevant values from the width settings.
(For example, if you set the padding to 1% for both divs, this would mean
there would be 1% of padding on each side, so 2% would need to be removed from
each width value to keep the combined width of the two divs under 100%.
Pages:
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381