Page 175 - CSS
P. 175
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus
metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>
CSS:
.sidebar {
/* `display:table;` shrink-wraps the column */
display:table;
float:left;
background-color:blue;
}
.content {
/* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
overflow:hidden;
background-color:yellow;
}
Fiddle
clear property
The clear property is directly related to floats. Property Values:
• none - Default. Allows floating elements on both sides
• left - No floating elements allowed on the left side
• right - No floating elements allowed on the right side
• both - No floating elements allowed on either the left or the right side
• initial - Sets this property to its default value. Read about initial
• inherit - Inherits this property from its parent element. Read about inherit
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
https://riptutorial.com/ 153
