CODEWITHSUNDEEP
htmlcss
Richard Linares
Richard Linares

Reputation: 709

How to put two divs side by side

So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:

Image But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form. I want the boxes to be next to each other, with about an inch of separation between them.

I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:

Image I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.

Upvotes: 70

Views: 356274

Answers (10)

Jarrod Naidoo
Jarrod Naidoo

Reputation: 29

All great solutions

a great way to make a website responsive for a first time web developer is to make use of a front-end development framework.

https://getbootstrap.com/docs/5.3/layout/grid/

using the container and grid system could be helpful

Upvotes: 0

Gaurav Nandankar
Gaurav Nandankar

Reputation: 21

you can try this.

div is a block element so by default it will take a block space to show so here we're giving it display property inline-block.

.box {
    width: 100px;
    height: 100px;
    margin: 10px 10px 10px 10px;
    border: 5px solid black;
    border-radius: 8px;
    text-align: center;
    align-content: center;
    display: inline-block;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Learning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    
</body>
</html>

Upvotes: 0

Khabir
Khabir

Reputation: 5854

You can do it in three ways:

Float Method

<div class="float-container">
  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
</div>

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}

Flexbox Method

<div class="flex-container">
  <div class="flex-child magenta">
    Flex Column 1
  </div>
  <div class="flex-child green">
    Flex Column 2
  </div>
</div>
.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
}

CSS Grid Method

<div class="grid-container">
    <div class="grid-child purple">
        Grid Column 1
    </div>
    <div class="grid-child green">
        Grid Column 2
    </div>
</div>
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

Source

Upvotes: 2

keemahs
keemahs

Reputation: 998

I am just giving the code for two responsive divs side by side

*{
  margin: 0;
  padding: 0;
}

#parent {
  display: flex;
  justify-content: space-around;
}

#left {
  border: 1px solid lightgray;
  background-color: red;
  width: 40%;
}

#right {
  border: 1px solid lightgray;
  background-color: green;
  width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">
        <div id="left">
        lorem ipsum dolor sit emet
        </div>
        <div id="right">
        lorem ipsum dolor sit emet
        </div>
    </div>
</body>
</html>

Upvotes: 6

Dostonbek Oripjonov
Dostonbek Oripjonov

Reputation: 1674

<div style="display: inline">
    <div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
    <div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>

Upvotes: 7

Abdelillah SchyZophr&#233;ny
Abdelillah SchyZophr&#233;ny

Reputation: 461

This will work

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>

Upvotes: 44

Danilo Kobold
Danilo Kobold

Reputation: 2581

http://jsfiddle.net/kkobold/qMQL5/

#header {
    width: 100%;
    background-color: red;
    height: 30px;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#first {
    width: 100px;
    float: left;
    height: 300px;
        background-color: blue;
}
#second {
    width: 200px;
    float: left;
    height: 300px;
    background-color: green;
}
#clear {
    clear: both;
}
<div id="header"></div>
<div id="container">
    <div id="first"></div>
    <div id="second"></div>
    <div id="clear"></div>
</div>

Upvotes: 80

Victor Ejiogu
Victor Ejiogu

Reputation: 1374

This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.

enter image description here

HTML

<div class="container">

  <header>
    <div class="logo">Logo</div>
    <div class="menu">Email/Password</div>
  </header>

  <div class="first-box">
    <p>Video Explaning Site</p>
  </div>

  <div class="second-box">
    <p>Sign up Info</p>
  </div>

  <footer>
    <div>Website Info</div>
  </footer>

</div>

CSS

.container {
  width:900px; 
  height: 150px;
}

header {
  width:900px; 
  float:left; 
  background: pink; 
  height: 50px;
}

.logo {
  float: left;
  padding: 15px
}

.menu {
  float: right;
  padding: 15px
}

.first-box {
  width:300px; 
  float:left; 
  background: green; 
  height: 150px;
  margin: 50px
}

.first-box p {
  color: #ffffff;
  padding-left: 80px;
  padding-top: 50px;
}

.second-box {
  width:300px; 
  height: 150px; 
  float:right; 
  background: blue;
  margin: 50px
}

.second-box p {
  color: #ffffff;
  padding-left: 110px;
  padding-top: 50px;
}

footer {
  width:900px; 
  float:left; 
  background: black; 
  height: 50px;
  color: #ffffff;
}

footer div {
  padding: 15px;
}

Upvotes: 3

Jason Sears
Jason Sears

Reputation: 429

Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):

<style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>

As far as the content boxes go, I would suggest trying to use 

<style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>

I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.

Upvotes: 1

user2133617
user2133617

Reputation:

Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.asp might be a good resource.

Upvotes: 1

Related Questions