- Home
- Uncategorized
- Splitting Content with HTML and CSS
Splitting Content with HTML and CSS
By It’s easy to split content with html and css:
<div>
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>
Take note of the css properties that align the content horizontally:
- float:left => Align to the left and allow for content on sides
- float:right => Align to the right side and allow for content on sides
- clear:both => finish off the aligning so that content that follows starts beneath. Many people forget this property and get frustrated with float
Also note that the styling is done inline in the above example by using the div’s style attributes. This is also possible to achieve with css:
<style type="text/css">
.splitChild {
float:left;
width:50%
}
.splitParent:after {
content:'';
clear:both;
display:block
}
</style>
<div class="splitParent"> <div class="splitChild">Left</div> <div class="splitChild">Right</div> </div>
Looking for More
Then you need to check out StackAt, a jQuery Plugin by LoveTech. StackAt makes it easy to design responsive content that is split horizontally on large screens but collapses and stacks vertically on smaller screen. The best part of StackAt is how customizable it is and easy it is to achieve the exact resaponsive behavior your are looking for.