How to do Custom HTML for the flexible content between two boxes

How to create flexible HTML between two boxes?

You can create mainBox where you want flexible content and insert as you will HTML content(Images, video, audio, form, text etc.). you want any side content box left or right.

But here is giving an example for the left section area. You will write CSS "float: left" this is mandatory for the left wrap of the box and give margin from the right side and bottom side then you will use this box inside of the mainBox as given in the example below with screenshot.



<style>
body{font-family: Arial, Helvetica, sans-serif;}
.leftSide{float: left; margin: 0 30px 15px 0; background: #bf6; padding: 5px;}
.mainLine::after{clear: both; width: 100%; display: block;}
.mainLine{ background: #eee; margin-bottom: 20px; padding: 20px;}
</style>

<div class="mainLine">
    <div class="leftSide">Left side content or Images</div>
Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.
</div>
<div class="mainLine">
        <div class="leftSide">Left side content or Images</div>
    Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.
    Content expand with two boxes.Content expand with two boxes.Contents.Content expand with two boxes.Content expand with two boxes.
    </div>

    <div class="mainLine">
            <div class="leftSide"><img src="anythinglearn.png" alt="AnythingLearn"></div>
        Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.

        Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.xpand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.Content expand with two boxes.
        </div>

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.