Page 174 - CSS

tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel,
suscipit quis, luctus non, massa. </p>
</div>
<div class="right-sidebar">
<h1>Right Sidebar</h1>
<p>Fusce ac turpis quis ligula lacinia aliquet.</p>
</div>
</div>

CSS:

.wrapper {
width:600px;
background-color:pink;
padding:20px;

/* Floated elements don't use any height. Adding "overflow:hidden;" forces the
parent element to expand to contain its floated children. */
overflow:hidden;
}

.left-sidebar {
width:150px;
background-color:blue;
float:left;
}

.content {
width:300px;
background-color:yellow;
float:left;
}

.right-sidebar {
width:150px;
background-color:green;
float:right;
}

Two-Column Lazy/Greedy Layout

This layout uses one floated column to create a two-column layout with no defined widths. In this
example the left sidebar is "lazy," in that it only takes up as much space as it needs. Another way
to say this is that the left sidebar is "shrink-wrapped." The right content column is "greedy," in that
it takes up all the remaining space.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.

https://riptutorial.com/ 152