Putting two divs next to one another?

HTML-CSS
1

Screen Shot 2022-05-29 at 7.05.33 AM
Screen Shot 2022-05-29 at 7.05.33 AM1920×1247 80.9 KB

im trying to put my h1 and my fake login on the same line, but opposite sides of the screen

<!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">
    <link href="css/beta.css" rel="stylesheet" type="text/css" />
    <title>Beta Test!</title>
</head>
<body>
    <div class="header">
        <header class="inline-b">
            <h1>Myspace</h1>
            <div class="Log-in">
                <form id="Log-in">
                    <div><input type="email" name="email" id="email"  placeholder="Email" required /></div>
                    <div><input type="password" name="password" id="password" placeholder="Password" required /> </div>
                    <input type="button" value="Log in"> <input type="button" value="Create Account">
                </form>
            </div>

        </header>   
        <hr/>
    </div>

    <main>
        <h1>Hello World!</h1>

    </main>
    
    <footer>

    </footer>
</body>
</html>

body{
    font-family: Comic Sans MS
}

.Log-in{
    text-align: right;
    margin-right: 10px;
    
}

I tried to put a display: in-line, display: inline-box in my .Log-in and in my .header class

2

Have you looked into using floats? Floats can be a good way to have content on the same line. here’s a W3 article on it

Otherwise I would suggest using the css grid method if you are comfortable with that. It is also a good way to achieve this.

1 Like
3

I agree with EllaGriff, you can use floats or CSS Grid. Another way you can achieve this is using the CSS Flexbox. For example, you could apply something like this to your inline-b class like:

.inline-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Also, another thing to consider is using semantic HTML. Here’s an article from freeCodeCamp on it.

Happy coding!

2 Likes
4

Thank you so much for the tip, this is what i came up with and it worked!

.Log-in{
    margin-left: auto;
    
    
    
}
header{
    display: flex;
    flex-direction: row;
1 Like
5

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