How to divide two section vertical(image + texts) in a html page

HTML-CSS
1

Hello,
I have created a registration page where I have two sections: one on the left is an image and the other is the section where the user registers.
I am trying several solutions that I have found on the internet, but they do not work ( I tried to use float and flexbox),but the page shows image above and title below as if it were a single column.

This is a link where there is CSS columns that I found:

HTML:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>

    <body style=" background:#e2eee7c7">
        <div class="row">
        <div class="column left"><img src="images/cone.jpg" style="width:500px;height:600px;"></div>
        <div class="column right">
          <p>ALL I NEED IS ICE_CREAM</p>
        </div>
    </div>
    </body>
    </html>
2

Floats are one of the harder methods to work with. Flexbox should work done correctly but in my opinion CSS Grid is the best tool for these things. It is usually my go to option where layouts are concerned. Something like -
.row {
display:grid;
grid-template-columns:1fr 1fr;
}
Would help if you linked to your code so we could have a closer look.
I assume you have sized your divs so that they are not too wide to fit next to each other?

3 
.row {
  display: flex;
}

.column {
  flex: 50%;
}
4

I am not sure what the flex:50%; means to be honest. Is that shorthand for
flex-basis:50%;?
Try giving the left and right divs a
width:45vw; just to test, if that works then try 50vw.

1 Like
5

Hi @camcode ,

Using Flexbox it can be done easily. You need to create a <div> tag(Parent <div>) and place two <div> tag (Child <div>) between the parent <div>.

Style your Parent <div> tag.

Below is the example I tried for you., Hope it helps.

image
image1835×716 161 KB

Below is CSS style

image
image911×765 24.4 KB

6

Thanks all for replies!!!
I used flexbox and works
I had a problem with VSCode that didn’t read CSS file.
It was that I didn’t use in tag link type="text/css"

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.