Drastic change after using float: left;

HTML-CSS
1

code : https://glitch.com/edit/#!/zinc-freezer
output : https://zinc-freezer.glitch.me/

I was trying to figure out all the edge cases of linear-gradient() and repeating-linear-gradient() and trying to refresh my knowledge of how much i’ve learned.

I wanted to make something like a code -> output like MDN.

the output is in the wrong place because of margin (probably), to fix it i tried to use float: left; but that just changed everything dont know why.

Q 1 : Please explain the effect of using float: left (check comment in the css file)
Q 2: How do i get output right to the code?

2

Q1: float-left means to makes block element float to left one by one . i can’t explain very clearly . sorry . but the point it’s Inline and block level elements .

Q2: here’s the code .

.heading {
    text-align: center;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 50px;

}

.example {
    background-color: white;
    box-shadow: 5px 5px 50px black;
    border-radius: 15px;
    margin-left: 12.5%;
    margin-right: 12.5%;
    display: flex;
}

.code {
    box-shadow: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 17px;
    padding: 30px;
    font-style: italic;
    border-right: 2px solid;
    /* margin-right: 60%; */ 
    /* float: left; */
}

.result {
    background: linear-gradient(red, orange); 
}

body {
    background-image: url("https://cdn.glitch.com/7bc9b8d2-7454-4aac-851d-70841d65e5fa%2Fbananas.png?1533099386249");

}
3


You will understand if you go through these… Instead of float use flexbox

1 Like
4

just a small improvement:

width: 100%; in result class

Thanks