Needing Help on a Web Dev Challenge (HTML and CSS)-CodePudding

im very new to learning web development, and i'm going through the hills and valleys of trying to improve. So far I just know HTML and CSS so this should be very simpy to answer. I'm on a website that does web challenges to help you improve and this is what it SHOULD look like: The goal

However this is what i currently have: (I color coded the divs so you could better see what's going on. Blue is the first div that holds the text, green is the 2nd that should hold the image, and the "binding-div" is purple which was supposed put the two divs inside) The Current State

My problem is the image isn't going into the "second-div", and i dont know why.

body {
    background-color: black;
}

.container-div {
    background-color: rgb(133, 63, 208);
}

.binding-div {
    margin: 130px 205px;
    background-color: rgb(27, 134, 88);
    width: 1080px;
    height: 446px;
}

.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width: 540px;
    height: 446px;
    text-align: center;
}

.second-div {
    display: inline-block;
}

h1 {
    color: white;
    width: 60%;
    margin: 60px auto 20px auto;
}

p {
    color: white;
    width: 60%;
    margin: 0 auto;
}

.bottom-p {
    margin: 140px auto 40px auto;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Stat Card</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div >
            <div >
                <div >
                    <h1>Get insights that help your business grow.</h1>
                    <p>
                        Discover the benefits of data analytics and make better decisions regarding
                        revenue, customer experience, and overall efficiency.
                    </p>
                    <p >Challenge by Frontend Mentor. Coded by (insert name)</p>
                </div>

                <div >
                    <img src="Images\image-header-desktop.jpg" />
                </div>
            </div>
        </div>
    </body>
</html>

It's almost like the image doesn't recogize the div. Any help is appreciated.

CodePudding user response：

You don't need to change your div in a inline -block. A div is a block.

To get the two div in the same line the easier way is to use display: flex. In your parents container of your div so in binding-div.

CodePudding user response：

If you want to show two div in same line, just use this:

.binding-div {
    margin: auto;
    background-color: rgb(27, 134, 88);
    width: 1080px;
    height: 446px;
}

.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width: 50%;
    height: 446px;
    text-align: center;
    float: left;
}

.second-div {
    display: inline-block;
    float: left;
}

.binding-div:after{
    content: "";
    clear:both;
    display: table;
}

I hope it will work.

Here's your complete code. I've made Have some simple changes,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Stat Card</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div >
            <div >
                <div >
                    <h1>Get insights that help your business grow.</h1>
                    <p>
                        Discover the benefits of data analytics and make better decisions regarding
                        revenue, customer experience, and overall efficiency.
                    </p>
                    <p >Challenge by Frontend Mentor. Coded by (insert name)</p>
                </div>

                <div >
                    <img src="https://images.pexels.com/photos/38568/apple-imac-ipad-workplace-38568.jpeg?auto=compress&cs=tinysrgb&w=1260" />
                </div>
            </div>
        </div>
    </body>
</html>

The updated CSS:

body {
    background-color: black;
}
.container-div {
    background-color: rgb(133, 63, 208);
}
.binding-div {
    margin: 130px auto;
    background-color: rgb(27, 134, 88);
    width:100%;
    max-width: 1080px;
    height: 446px;
}
.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width:50%;
    height: 446px;
    text-align: center;
    float:left;
    
}
.second-div {
    display: inline-block;
    float:left;
    width:50%;
}
.binding-div:after{
display:table;
clear:both;
content:";
}
.second-div img{
width:100%;
}
h1 {
    color: white;
    width: 60%;
    margin: 60px auto 20px auto;
}
p {
    color: white;
    width: 60%;
    margin: 0 auto;
}
.bottom-p {
    margin: 140px auto 40px auto;
}

Your image size: 100%; Your width to max-width