Insanelogs

Flex direction basics

2025-09-05T00:00:00+00:00

Normal behavior

Starting code -

    </span>Document<span class="nt">
    
     class="container">
         class="item">1

         class="item">2


         class="item">3
         class="item">4
         class="item">5

Their is a simple container

and inside it we have 5 item

s. By default

is a block level element so they all get stacked one after another.

Note the .container and .item styling. This is base styling used in the pictures below as well. It would be removed from later codes to reduce cluttering.

Display flex

Now we can make this container

a flexbox (a type of display like block and inline display).
To do this simply make display: flex for the container

.container {
    display: flex;
}

Here container

is now called flex container and item

s inside it are flex items.

Why the items align the way they did?

When we do display: flex we can imagine two axes being created.

Flex items are always aligned with respect to main axis.
Also the item are aligned in order they were written, 1 to 5.
The axis perpendicular to main axis is cross axis.

Their are two flexbox properties which can be applied on the flex container.

justify-content which always works on the main axis.
align-items which always works on the cross axis.

Now comes flex-direction. This is also a flex container property. With it we can change directions of main and cross axis. And that’s it.

Flex directions

We will use justify-content: center and align-items: center property for the coming examples.

1. Applying justify-content: center.

.container {
    justify-content: center;
}

It pushes flex items from left to right in the direction of main axis to make it center in that axis.

2. Applying align-items: center.

.container {
    justify-content: center;
    align-items: center;
}

It now pushes flex items from top to bottom to make it center in the cross axis.

Few examples

1. Flex direction made row.

.container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

This is the default flex-direction. The item

s simply gets aligned on the direction of main axis from 1 to 5.

2. Flex direction made column.

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

This changes the direction of main axis and cross axis. And flex items always gets aligned in the main axis.

Note: Any changes made to justify-content would now take effect in the new main axis. And any changes applied to align-items would now take effect in the new cross axis.

Example: Removing align-items: center would reset flex items to left instead of top.

3. Flex direction made row-reverse.

.container {
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}

This changes the main axis direction as shown. And so item

s aligns from right to left this time from 1 to 5.

Or, the first item

which is 1 will start from tail of the main axis followed by others in order.

4. Flex direction made column-reverse.

.container {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

The main axis now runs bottom to top and so the flex-items gets aligned in the same way.

Their are many other options for flex-direction, justify-content and align-items which follows this same principal.

End
🦖

Pattern problems in C++

2025-08-13T00:00:00+00:00

Patterns problems in C++ archive here. I will probably keep on updating it as I solve more similar problems.

Problems found from YT videos, websites, or who knows from where. And yea I really did solve them instead of just copying. Pls trust. Pls. No lie me. Me good.

Read it maybe? : These are mostly solved just using for loops. Their are many ways to so solve one pattern, for example some will start i from 1 some from 0, some will use <= to end the loop while some <, some will use some other mathematical formula or view the pattern grid differently, etc. Some problems have more than one method to solve it, showcasing my 900+ IQ. Lol.

Pattern 1 -

* * * *
* * * *
* * * *
* * * *

void print_pattern_01(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n; j++) {
            cout << "* ";
        }
        cout << endl;
    }
}

Pattern 2 -

*
* *
* * *
* * * *
* * * * *

void print_pattern_02(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i + 1; j++) {
            cout << "* ";
        }
        cout << endl;
    }
}

Pattern 3 -

void print_pattern_03(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 1; j < i + 1; j++) {
            cout << j << " ";
        }
        cout << endl;
    }
}

Pattern 4 -

void print_pattern_04(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 1; j < i + 1; j++) {
            cout << i + 1  << " ";
        }
        cout << endl;
    }
}

Pattern 5 -

* * * *
* * *
* *
*

void print_pattern_05(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n - i; j++) {
            cout << "* ";
        }
        cout << endl;
    }
}

void print_pattern_06(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 1; j < n + 1 - i; j++) {
            cout << j << " ";
        }
        cout << endl;
    }
}

Pattern 7 -

    *
   ***
  *****
 *******
*********

void print_pattern_07(int n) {
    for (int i = 0; i < n; i++) {
    
        // Prints first half
        //     *
        //    **
        //   ***
        //  ****
        // *****
        for (int j = 0; j < n; j++) {
            if (j < n - i - 1)
                cout << " ";
            else
                cout << "*";
        }
        
        // Prints second half -
        //
        //      *
        //      **
        //      ***
        //      ****
        for (int k = 0; k < i; k++) {
            cout << "*";
        }
        cout << endl;
    }
}

void print_pattern_07(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n - i - 1; j++) {
            cout << " ";
        }
        
        for (int j = 0; j < 2 * i + 1; j++) {
            cout << "*";
        }
        cout << endl;
    }
}

Pattern 8 -

*********
 *******
  *****
   ***
    *

void print_pattern_08(int n) {
    for (int i = 0; i < n; i++) {
        // Prints first half -
        // *****
        //  ****
        //   ***
        //    **
        //     *
        for (int j = 0; j < n; j++) {
            if (j < i)
                cout << " ";
            else
                cout << "*";
        }
        
        // Prints second half -
        //      ****
        //      ***
        //      **
        //      *
        //
        for (int k = 0; k < n - i - 1; k++) {
            cout << "*";
        }
        cout << endl;
    }
}

void print_pattern_08(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i; j++) {
            cout << " ";
        }
        
        for (int j = 0; j < 2 * (n - i) - 1; j++) {
            cout << "*";
        }
        cout << endl;
    }
}

Pattern 9 -

    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

void print_pattern_09(int n)
{
    // For n = 5
    
    // Prints first part -
    //     *
    //    ***
    //   *****
    //  *******
    // *********
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n - i - 1; j++) {
            cout << " ";
        }
        
        for (int j = 0; j < 2 * i + 1; j++) {
            cout << "*";
        }
        cout << endl;
    }
    
    // Prints second half -
    // *******
    //  *****
    //   ***
    //    *
    for (int i = 1; i < n; i++) {
        for (int j = 0; j < i; j++) {
            cout << " ";
        }
        
        for (int j = 0; j < 2 * (n - i) - 1; j++) {
            cout << "*";
        }
        cout << endl;
    }
}

Pattern 10 -

*
**
***
****
*****
****
***
**
*

void print_pattern_10(int n) {
    // Considering n as till the row with maximum stars
    // Therefore n = 5

    // Prints first half -
    // *
    // **
    // ***
    // ****
    // *****
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i + 1; j++) {
            cout << "*";
        }
        cout << endl;
    }

    // Prints second half -
    // ****
    // ***
    // **
    // *
    for (int i = 1; i < n; i++) {
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        cout << endl;
    }
}

void print_pattern_10(int n) {
    // Here we consider n = total number of rows
    // Therefore n = 9
    
    for (int i = 0; i < 2 * n - 1; i++) {
        int stars = i + 1;
        if (i > n - 1) stars = ((2 * n) - (i + 1));
        for (int j = 0; j < stars; j++) {
            cout << "*";
        }
        cout << endl;
    }
}

Pattern 11 -

void print_pattern_11(int n) {
    short flip = 1;
    for (int i = 0; i < n; i++) {
        if (i % 2 == 0) flip = 1;
        else flip = 0;
        for (int j = 0; j < i + 1; j++) {
            cout << flip << " ";
            flip = 1 - flip;
        }
        cout << endl;
    }
}

Pattern 12 -

void print_pattern_12(int n) {
    for (int i = 0; i < n; i++) {
        // first half
        for (int j = 0; j < i + 1; j++) {
            cout << j + 1;
        }
        
        // spaces
        for (int j = 0; j < 2 * (n - i - 1); j++) {
            cout << " ";
        }
        
        // second half
        for (int j = i + 1; j > 0; j--) {
            cout << j;
        }
        
        cout << endl;
    }
}

Pattern 13 -

1
3
5 6
8 9 10
12 13 14 15

void print_pattern_13(int n) {
    int x = 1;
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i + 1; j++) {
            cout << x++ << " ";
        }
        cout << endl;
    }
}

Pattern 14 -

A
AB
ABC
ABCD
ABCDE

void print_pattern_14(int n) {
    for (int i = 0; i < n; i++) {
        char x = 'A';
        for (int j = 0; j < i + 1; j++) {
            cout << x;
            x = x + 1;
        }
        cout << endl;
    }
}

void print_pattern_14(int n) {
    for (char i = 'A'; i < 'A' + n; i++) {
        for (char j = 'A'; j < i + 1; j++) {
            cout << j;
        }
        cout << endl;
    }
}

void print_pattern_14(int n) {
    for (int i = 0; i < n; i++) {
        for (char j = 'A'; j < 'A' + i + 1; j++) {
            cout << j;
        }
        cout << endl;
    }
}

Pattern 15 -

ABCDE
ABCD
ABC
AB
A

void print_pattern_15(int n) {
    for (int i = 0; i < n; i++) {
        char x = 'A';
        for (int j = 0; j < n - i; j++) {
            cout << x;
            x = x + 1;
        }
        cout << endl;
    }
}

void print_pattern_15(int n) {
    for (int i = 0; i < n; i++) {
        for (char j = 'A'; j < 'A' + (n - i); j++) {
            cout << j;
        }
        cout << endl;
    }
}

Pattern 16 -

A
BB
CCC
DDDD
EEEEE

void print_pattern_16(int n) {
    char ch = 'A';
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i + 1; j++) {
            cout << ch;
        }
        ch++;
        cout << endl;
    }
}

Pattern 17 -

   A
  ABA
 ABCBA
ABCDCBA

void print_pattern_17(int n) {
    for (int i = 0; i < n; i++) {
        // space
        for (int j = 0; j < (n - i - 1); j++) {
            cout << ' ';
        }
        
        // chars
        char ch = 'A';
        for (int j = 0; j < i + 1; j++) {
            cout << ch++;
        }
        
        ch = ch - 2;
        for (int j = 0; j < i; j++) {
            cout << ch--;
        }
        
        cout << endl;
    }
    // No need to print the end spaces for each row.
    // Save computation yay!
}

void print_pattern_17(int n) {
    for (int i = 0; i < n; i++) {
        // space
        for (int j = 0; j < (n - i - 1); j++) {
            cout << ' ';
        }
        
        // chars
        char ch = 'A';
        for (int j = 0; j < 2 * i + 1; j++) {
            if (j < i) {
                cout << ch++;
            } else {
                cout <<  ch--;
            }
        }
        
        cout << endl;
    }
}

Pattern 18 -

E
D E
C D E
B C D E
A B C D E

void print_pattern_18(int n) {
    char ch = 'E';
    for (int i = 0; i < n; i++) {
        char start_char = ch;
        for (int j = 0; j < i + 1; j++) {
            cout << ch++ << " ";
        }
        ch = start_char - 1;
        cout << endl;
    }
}

void print_pattern_18(int n) {
    for (int i = 0; i < n; i++) {
        for (char ch = 'E' - i; ch < 'E' + 1; ch++) {
            cout << ch << " ";
        }
        cout << endl;
    }
}

Pattern 19 -

**********
****  ****
***    ***
**      **
*        *
*        *
**      **
***    ***
****  ****
**********

An attempt to explain my approach to solve these problems through this pattern 19

Method 1 approach -

Idea is to first divide entire pattern into two halves A and B -

Then subdivide the halves A and B into its quadrants (I, II, III, IV) -

Take half A and print its two quadrants (I and II) lines simultaneously -

For this just write the code to print pattern in quadrant II, then write the code to print pattern in quadrant I and then put a cout << endl in the end.

Do the same for second half B.

void print_pattern_19(int n) {

    // First half
    for (int i = 0; i < n; i++) {
    
        /////////////////////
        // Second quadrant //
        /////////////////////
        // stars
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        // spaces
        for (int j = 0; j < i; j++) {
            cout << " ";
        }
        
        ////////////////////
        // First quadrant //
        ////////////////////
        // spaces
        for (int j = 0; j < i; j++) {
            cout << " ";
        }
        
        // stars
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
    
    // Second half
    for (int i = 0; i < n; i++) {
    
        ////////////////////
        // Third quadrant //
        ////////////////////
        
        // stars
        for (int j = 0; j < i + 1; j++) {
            cout << "*";
        }
        
        // spaces
        for (int j = 0; j < n - i - 1; j++) {
            cout << " ";
        }
        
        /////////////////////
        // Fourth quadrant //
        /////////////////////
        
        // spaces
        for (int j = 0; j < n - i - 1; j++) {
            cout << " ";
        }
        
        // stars
        for (int j = 0; j < i + 1; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
}

Method 2 approach -

Divide the pattern into two halves A and B -

See the following pattern and then simply write the code for stars, then spaces and then again stars for both halves (first half shown here)

Another way to visualize (left side is code from method 1 and right side is code from method 2) -

See how j < i condition was written two times in half A which got combined to j < 2 * i. Same for half B.

void print_pattern_19(int n) {
    // First half
    for (int i = 0; i < n; i++) {
        // stars
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        // spaces
        for (int j = 0; j < 2*i; j++) {
            cout << " ";
        }
        
        // stars
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
    
    // Second half
    for (int i = 0; i < n; i++) {
        // stars
        for (int j = 0; j < i + 1; j++) {
             cout << "*";
        }
        
        // spaces
        for (int j = 0; j < 2 * (n - i - 1); j++) {
            cout << " ";
        }
        
        // stars
        for (int j = 0; j < i + 1; j++) {
             cout << "*";
        }
        
        cout << endl;
    }
}

Pattern 20 -

*        *
**      **
***    ***
****  ****
**********
****  ****
***    ***
**      **
*        *

void print_pattern_20(int n) {
    // First half
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < i + 1; j++) {
            cout << "*";
        }
        
        for (int j = 0; j < 2 * (n - i - 1); j++) {
            cout << " ";
        }
        
        for (int j = 0; j < i + 1; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
    
    // Second half
    // i = 1 so we can skip i = 0 line printing twice
    for (int i = 1; i < n; i++) {
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        for (int j = 0; j < 2 * i; j++) {
            cout << " ";
        }
        
        for (int j = 0; j < n - i; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
}

void print_pattern_20(int n) {
    int spaces = 2 * n;
    int stars = 0;
    for (int i = 0; i < 2 * n - 1; i++) {
    
        if (i >= n) {
            stars = 2 * n - i - 1;
            spaces += 2;
        } else {
            stars = i + 1;
            spaces -= 2;
        }
        
        // Stars
        for (int j = 0; j < stars; j++) {
            cout << "*";
        }
        
        // Spaces
        for (int j = 0; j < spaces; j++) {
            cout << " ";
        }
        
        // Stars
        for (int j = 0; j < stars; j++) {
            cout << "*";
        }
        
        cout << endl;
    }
}

Pattern 21 -

* * * * *
*       *
*       *
*       *
* * * * *

void print_pattern_21(int n) {
    for (int i = 0; i < n; i++) {
        // First and last row
        if ((i == 0) || (i == n - 1)) {
            for (int j = 0; j < n; j++) {
                cout << "* ";
            }
            cout << endl;
        } else {
            cout << "* ";
            for (int j = 0; j < n - 2; j++) {
                cout << "  ";
            }
            cout << "*" << endl;
        }
    }
}

void print_pattern_21(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n; j++) {
            // Fill with stars only if i or j is in boundary
            if (i == 0 || i == n - 1 || j == 0 || j == n - 1) {
                cout << "* ";
            } else {
                cout << "  ";
            }
        }
        cout << endl;
    }
}

Pattern 22 -

5 5 5 5 5 5 5 5
4 4 4 4 4 4 4 5
4 3 3 3 3 3 4 5
4 3 2 2 2 3 4 5
4 3 2 1 2 3 4 5
4 3 2 2 2 3 4 5
4 3 3 3 3 3 4 5
4 4 4 4 4 4 4 5
5 5 5 5 5 5 5 5

void print_pattern_22(int n) {
    for (int i = 0; i < 2 * n - 1; i++) {
        for (int j = 0; j < 2 * n - 1; j++) {
            // Calculate distances
            int top_dist = i;
            int bottom_dist = (2 * n - 1) - i - 1;
            int left_dist = j;
            int right_dist = (2 * n  - 1) - j - 1;
            
            // For
            // n = 2 -> max dist - 0
            // n = 3 -> max dist - 1
            // n = 4 -> max dist - 2
            // n = 5 -> max dist - 3
            // n = n -> max dist - (n - 2)
            cout << max(max(top_dist, bottom_dist), max(left_dist, right_dist)) - (n - 2) << " ";
        }
        cout << endl;
    }
}

void print_pattern_22(int n) {
    for (int i = 0; i < 2 * n - 1; i++) {
        for (int j = 0; j < 2 * n - 1; j++) {
            int top_dist = i;
            int bottom_dist = (2 * n - 1) - i - 1;
            int left_dist = j;
            int right_dist = (2 * n  - 1) - j - 1;
            
            // Before subtracting n
            // 0 0 0 0 0 0 0 0 0
            // 0 1 1 1 1 1 1 1 0
            // 0 1 2 2 2 2 2 1 0
            // 0 1 2 3 3 3 2 1 0
            // 0 1 2 3 4 3 2 1 0
            // 0 1 2 3 3 3 2 1 0
            // 0 1 2 2 2 2 2 1 0
            // 0 1 1 1 1 1 1 1 0
            // 0 0 0 0 0 0 0 0 0
            // So if we subtract n from each cell we get the desired pattern
                
            cout << n - min(min(top_dist, bottom_dist), min(left_dist, right_dist))<< " ";
        }
        cout << endl;
    }
}

Pattern 23 -

    *
   * *
  * * *
 * * * *
* * * * *

void print_pattern_23(int n) {
    for (int i = 0; i < n; i++) {
        for (int j = 0; j < n; j++) {
            if (j < n - i - 1)
                cout << " ";
            else
                cout << "* ";
        }
        cout << endl;
    }
}

Basic git commands

2025-08-09T00:00:00+00:00

Simple git commands you would use everyday, nothing else. Best to use as a cheatsheet sort of idk. Enjoy.

1. Set username and email. These credentials are used to tell who committed a particular commit.

# Set it globally.
git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

# Set for a particular repository.
cd repo
git config user.name "Your Name"
git config user.email "your_email@example.com"

2. Get status of which files are untracked, which are in staging area and which are modfiied.

git status
git status -s # shorter version of "git status".
			  # red M means changes made in file but not staged.
			  # green M means file is staged but not commited.

3. Add files to staging area.

git add file1 file2
git add -A (Add all untracked files)

4. Commit files from staging area.

git commit -m "Commit message"

5. Match working directory with its last commit version. If the file is staged and you modify it, then running this command will restore it to the staged version instead.

git checkout path/filename # To match the contents of the file/ files with their last commit verison.
git checkout -f # To match the contents of all modified files to their last commit version.

# git restore is the new version.

6. Show history of commits.

git log

# Show upto n (here 1) commit(s). It will show a detailed overview of the commit(s).
git log -p -1

7. Compares working directory with the staging area. If the file isn’t in staging area then it will compare it with the version last committed version (as that is in the staging area by default).

git diff

8. Compare files in staging area with their last commit version.

git diff --staged

9. Add/ Stage and commit tracked files in a single command.

git commit -am "Commit message"

Only works for files that are already tracked. Untracked files won’t be added. Use git add -A or git add untracked-file-name for that.

10. Remove a file from both working directory and from being tracked.

git rm filename

# then commit the changes.
git commit -m "remove filename"

11. Remove a file from being tracked but not from the working directory.

git rm --cached 

# then commit the changes.
git commit -m "remove filename from being tracked"

12. Example .gitignore. The effects of gitignore file is immediate. If the file you want to ignore is already being tracked then writing it down in gitignore won’t work. Simply git rm --cache the file and then it will be ignored by the git.

*.log       # ignore log files present in any subdir.
/*.log      # ignore log files present in root of the working directory.
somefolder/ # to ignore some folder.

13. View all branches.

git branch # By default their will be a master or main branch depening on your git global configs.

14. Create a branch. When you create a new branch, it starts with the exact state (commits and files) of the branch you created it from.

git branch branchname

If you created it from main branch and it had 5 commits. Then this new branch will also have 5 commits and start from their.

15. Switch branch.

git checkout

16. Create and switch to that branch in one command.

git checkout -b branchmain

17. Merge branch2 with branch1.

git checkout 
git merge 

Now branch2 has the changes made in branch1.

18. Connect GitHub repo (called as remote repo) with your local git repo. Then you can push and pull from this remote repo.

git remote add origin git-repo-url 

# It will add the repo url under the name origin. So next time whole url can be referred as "origin". Also we can say origin as the remote now.

Its basically like origin = url in terms of programming.

19. See what remote repo have been added.

git remote -v

20. Change url a remote (like origin) points to. Remote name is simply the name you associated your remote url with like origin.

git remote set-url

21. Remove a remote repo link like origin.

git remote remove origin # Replace origin with whatever you named your remote repo.

22. Rename a branch.

# Switch to the branch you want to rename.
git branch 

# Rename the branch.
git branch -M 

23. Set upstream for a branch.

git push -u origin main
# Now if you are on main branch, just writing git push would push main branch to origin.
# Won't work if you change branch.

24. How to push some other branch than main.

git push origin

25. Clone a remote repo.

git clone  # Will clone the repo contents into a folder named after the repo name.
git clone   # Will clone the repo contents into  folder.

26. Set default branch as main globally.

git config --global init.defaultBranch main

Notes

Tracking a file starts right after you add it to staging area.
Committing the file means you tell git to save these as the latest changes to my files.
A modified file it git means a tracked file whose content is changed. And that change in file hasn’t yet been staged.
Working directory simply means your local git repo. Or, the directory in which git init . was run
The staging area if empty then it contains the last commit files.
Adding a file in git simply means putting it to staging area.
Local git repo can be hosted on platforms like GitHub, bitbucket, gitlabs, etc.
Remote repo mean a repo in some remote place (other than your local machine). Somewhere in cloud like GitHub. Then you link it with your local repo to contain the same things.
Repo = Repository.

Lol diagrams xD?

Git workflow

Git status

🕊️ (don’t mind me, I am just a bird)

Simple profile card using basic CSS

2025-08-07T00:00:00+00:00

Code -

 lang="en">
    
         charset="UTF-8" />
         name="viewport" content="width=device-width, initial-scale=1.0" />
        </span>Document<span class="nt">
        
    
    
         class="card">
             class="image">
                 src="image.jpg"
                    alt="cover image"
                />
            


             class="tag">
                Coder
                Coder
            



             class="content">
                About me
                
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Laborum, dolores error fuga autem voluptatum nam? Unde illum
                    veritatis consequuntur quo est a similique quibusdam, iure,
                    error ducimus, delectus sint sed?
                
            

             href="#">Read more

Wrap text around image using CSS Float

2025-08-06T00:00:00+00:00

I have made made a

and inside it is a element and

element with some text.

as a black border with 10px padding, has a red border and

has a green border. I have also reset global (*) css margin and padding to 0.

Currently the text simply goes below the image. Default behavior of block level elements.

    
        </span>CSS Float<span class="nt">
        