Cascading style sheet (CSS) rules allow a Web designer to control the positioning of his website elements. At times, these rules cause frustration as conflicting positioning rules cause website elements to overlap. Fortunately, CSS settings enable the designer to establish default behaviours for the elements. When elements such a divs overlap, the designer can troubleshoot these settings until he achieves the desired outcome.
- Skill level:
Assign an overflow setting. The CSS overflow property governs the way a div handles the content assigned to the div. The five possible settings for the overflow rule are visible, hidden, scroll, auto and inherit. The default value of the overflow property is visible. This visible setting does not clip the overflow content. This means the content may spill out of the div and onto another div. This creates the perception that the divs are overlapping. The hidden setting will clip the content. The scroll and auto settings place a scrollbar by the div. And, the inherit setting allows the div to inherit its overflow value from its parent div. In the following CSS rule, the overflow property of a div with the ID of "yourDiv" has been set to scroll. Thus, extra content will not flow out of the div.
Write a clear parameter. At times, a floated CSS div may sneak up and into an open space beside another div. This creates the appearance of overlap onto the other div. The clear parameter enacts a clearance rule around each div. The values for the rule are none, left, right, both and inherit. The default value of the clear property is set to none. This means that there are no clearance rules around the first div and a floated div could sneak up besides it. The left and right settings place a clearance rule on their respective sides of the div. The both setting places a clearance rule on both sides of the div. The inherit rule allows the div to inherit the clear property of its parent div. In the following example, the clear setting for the "yourDiv" div has been set to both. This means that a floated div can not sneak up on either side of the first div.
Include a spacer div. At times, a floated div's content will expand the length of a floated div until it is longer in length than its relatively positioned sibling div. When this happens, the floated div may expand out of the containing parent div and into subsequent aunt and uncle divs. To fix this problem, simply include an empty spacer div after the two sibling divs. The spacer div must contain a clear rule with a value of both. The clear rule prevents the floated div from expanding into either side of the spacer div. The spacer div acts as the border through which the floated div cannot pass. Here is an example of a spacer div:
<div class="spacer" style="clear: both;"></div>
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for