HTML Overflows and Positioning
Today’s session was spent on methods for layout and positioning.
- Layouts, Wrapping up Floats and Overflows
- Position Property
Wrapping up Floats and Overflows:
Floating elements are elements that are floated above other elements to the left or right (horizontal margins). As was defined verbatim in Blog 7.
The Overflow property in CSS allows elements where content may “overflow” from the borders of an element.
All these parameters, aside from [visible] hide overflown content. For reference (and skipping the obvious ones) scroll adds a scrollbar in the direction of the overflown element. Auto defines the overflow behavior to fit the given dimensions of an element.
Combined with floats, overflown text may look like this:
<!DOCTYPE html>
<html>
<head>
<style>
*{width: 600px; margin: 0; padding: 0;}
#header{border: 2px dotted red;}
#body{border: 2px solid blue; display: inline-block; height:fit-content;}
.contentLeft{
border: 2px solid gray; width: 25%; height: 300px;
float: right; overflow: auto;}
.contentRight{
border: 2px solid gray; width: 48%; height: 300px;
float: left;}
.contentRight>p{overflow-wrap: break-word; width:fit-content;}
.contentCenter{
border: 2px solid gray; width: 25%; height: 300px;
float: left; overflow: hidden;}
#footer{border: 2px dashed green; height: 100px; clear:both; margin-top: -4px;}
</style>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>double</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div id="header">
<h1>
Lorem ipsum
</h1>
<br>
<p>Consectetur adipiscing elit.</p>
</div>
<div id="body">
<div class="contentLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris nec ante ut ligula faucibus tincidunt.
Nulla ut elit ac ex egestas eleifend.
Maecenas sit amet est sit amet magna eleifend porta.
Curabitur at justo eleifend, malesuada sem et, tempus dolor.
</p>
</div>
<div class="contentCenter">
<p>
Suspendisse scelerisque arcu eu est facilisis volutpat.
Nullam luctus odio hendrerit sem consectetur sodales.
Aliquam et risus viverra, commodo nisl ac, condimentum dolor.
Curabitur tristique sapien non elit scelerisque accumsan.
Maecenas eu tortor sit amet leo scelerisque porta vel eget velit.
</p>
</div>
<div class="contentRight">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris nec ante ut ligula faucibus tincidunt.
Nulla ut elit ac ex egestas eleifend.
Maecenas sit amet est sit amet magna eleifend porta.
Curabitur at justo eleifend, malesuada sem et, tempus dolor.
</p>
</div>
</div>
<div id="footer">
<p>
Praesent non tortor ut metus dignissim pretium.
Integer congue velit ac metus finibus ultricies.
Nam pretium orci sit amet enim malesuada sagittis.
Aenean egestas lacus eget tellus pulvinar rutrum.
Pellentesque laoreet ipsum sed felis pellentesque dignissim.
</p>
</div>
</body>
</html>
Note: Text wrapping using the property overflow-wrap only works when the width (limit) is defined for the element. Without it the text does not wrap
Yields the (ugly) result:
Positioning using the position property in CSS is done via the properties [bottom/top/right/left] and the parameters for the position property [relative/absolute/static/fixed].
Relative positioning in CSS positions an element relative to its default position without styling. Therefore an absolute element is moved around it’s origin point (0,0) in the default document flow.
Absolute positioning in CSS positions an element in relation to its parent. It is removed from the normal document flow, instead being positioned relative to the origin point (0,0) of the parent element.
Positioning in CSS requires the exact position of an element to be defined. Therefore, attempts to position elements in relation to all other elements in a document should be done with scripting or functions such as flexbox.
#footer{
position: relative;
bottom: 0px;
border: 1px solid green;
}
#header{
border: 1px solid green;
}
#container{
border: 1px solid purple;
}
.sidebar{
border: 1px solid orange;
position: absolute;
left: 207px;
width: 300px;
height: 322px;
}
.content{
border: 1px solid green;
position: relative;
right: 0px;
width: 194px;
height: 322px;
}
Finally, the property z-index can be used to define the layer on which the element is on. The higher the layer number, the greater precedence is given to the element when positioning on the Z-axis.
.element{
z-index: 1;
}
-gonkgonk