Pages

Wednesday, March 27, 2019

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:

Post a Comment

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