how to create a layout using float

Question

how to create a layout using float

Navigation

#1 by (4 votes)

0

I'm trying to create a page just like the one in the photo, but to no avail. From what I've seen I need to use the float property.

I'vecomethisfar,butit'snotresponsive,either.

In the second photo I created, I can not get the 4 images to pick up the entire screen and the layout remains responsive.

html css

asked by anonymous 06.12.2018 / 19:08

1 answer

Problems displaying a foreach (php) inside an html code [closed] If I declare a variable and not use it in the program body, will it compile?

score 4 · Accepted Answer

Follow a model made in flex. Here is a complete guide that can help you. link

View full-screen code to see responsiveness and how they behave. On screens smaller than 768px they have the bigger box on top and smaller ones on the bottom. Large screens are side by side.

Thevalueshereareallin%soitgetsprettyresponsive,andtheheightofcontainerIleftwith50vh,50%heightofbody.Butyoucanputafixedvaluehereinpxifyouwanttoalwaysleavetheheightwiththedefinedsize.container{height:50vh;}

Hereisthecodefortheimageabove:

OBS:IcouldhaveoptimizedCSSmorebecausesomepropertiesrepeatalot,butIpreferredtoleaveittofacilitateunderstanding.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    border: 1px solid #000;
}
.container {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.box {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:768px) {
.container {
    flex-direction: column;
}
}   
.left, .right {
    width: 100%;
}
}

<div class="container">
    <div class="left">esquerda</div>
    <div class="right">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>

With Float

Same layout above, however using Float . Just for educational purposes to see how you would use Float . Although I do not recommend it, and getting more complicated to align the inner elements to the center.

Display the code below

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    border: 1px solid #000;
}
.container {
    width: 100%;
    height: 50vh;
}
.left {
    width: 50%;
    height: 100%;
    float: left;
}
.right {
    width: 50%;
    height: 100%;
    float: left;
}
.box {
    width: 50%;
    height: 50%;
    float: left;
}
    
@media screen and (max-width:768px) {
.left {
    width: 100%;
    height: 50%;
    float: left;
}
.right {
    width: 100%;
    height: 50%;
    float: left;
}
}

<div class="container">
    <div class="left">esquerda</div>
    <div class="right">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</div>