CODEWITHSUNDEEP
htmlcss
MrSouheil
MrSouheil

Reputation: 21

Multiple DIVs on same row

How can I add multiple divs inside 1 div on the same row, they are being displayed on different lines. I'm only using HTML and CSS.

Screenshot of how it is now

Screenshot of what aiming for

HTML (Div is under Buttons comment):

<!DOCTYPE html>
<html>
<head>
    <title>Cook Book</title>
    <link rel="stylesheet" href="../CSS/StyleSheet.css">
</head>
<body>
    
    <!-- Page Header -->
    <header class="Header">
        <div class="HeaderDiv">
            <h1 class="HeaderText"> Welcome To Cook Book!</h1>
        </div>
    </header>

    <!--Buttons-->
    <div class="navbar">
        <a href="Home.html" style="width: 20%">Home</a>
            <div class="RecipesDropDown">
                <button class="RecipesButton" style="width: 20%">Recipes</button>
                <div class="DropDown-Content-Recipes">
                    <a href="ApplePie.html">Apple Pie</a>
                    <a href="BananaPie.html">Banana Cream Pie</a>
                </div>
            </div>
            <div class="TermsDropDown">
                <button class="TermsButton" style="width: 20%">Cooking Terms</button>
                <div class="DropDown-Content-Terms">
                    <a href="Terms.html">Pie Cooking Terms</a>
                </div>
            </div>
            <div class="DietDropDown">
                <button class="DietButton" style="width: 20%">Cooking Diets</button>
                <div class="DropDown-Content-Diet">
                    <a href="HealthyRecipes.html">Practical & Healthy Recipes</a>
                    <div class="WeeklyDropDown">
                        <button class="WeeklyButton" style="width: 20%">Recipes</button>
                        <div class="DropDown-Content-Weekly">
                            <a href="Week1.html">Week 1</a>
                            <a href="Week2.html">Week 2</a>
                            <a href="Week3.html">Week 3</a>
                            <a href="Week4.html">Week 4</a>
                        </div>
                    </div>
                </div>
            </div>
        <a href="Contact.html" style="width: 20%">Contact Us</a>
    </div>
    
    <!-- Middle Text -->
    <div class="MiddleDiv">
        <p class="MiddleText"> <b>Your Favorite Foods, <br> Your Weight Loss Goals, <br> Your Kind Of Diet!</b></p>
        <input type="email" class="EmailText" placeholder="Enter Your Email" size="35">
        <button type="submit" class="EmailButton"> Subscribe </button>
    </div>
    
    <!--Bottom Watermark-->
    <div>
        <div class="BottomDiv">
            <p> Delicious no-frill meals, all custom selected for your specific calorie goal, delivered to your inbox weekly! </p>
        </div>
        <div class="Watermark">
            <p> © Souheil Tawil - 2021 </p>
        </div>
        
    </div>
    
</body>
</html>

CSS (Div styles are under the first comment block):

body {
    background-image: url("../Images/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    margin: 0;
}

.Header{
    background-image: url("../Images/woodbg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.HeaderDiv{
    color: white;
    font-size: 25px;
    text-align: center;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.HeaderText{
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 30px;
}

.Watermark{
    color: #000000; 
    background-color: white; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    width: 100%;
}

.BottomDiv{
    color: #ADD8E6; 
    background-color: red; 
    font-size: 19px;
    text-align: center; 
    position: absolute; 
    width: 100%;
    height: 100px;
    bottom: 0;
}

.MiddleDiv{
    text-align: center;
    text-align: left;
}

.MiddleText{
    margin-top: 330px;
    margin-left: 150px;
    font-size: 42px;
    color: white;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.EmailText{
    margin-left: 150px;
    line-height: 30px;
}

.EmailButton{
    color: white;
    background-color: red;
    padding: 6px 30px;
}

                                    /* ---------------------------- */
                                    /*   Drop Down Navigation Bar   */
                                    /* ---------------------------- */

.navbar {
    overflow: hidden;
    background-color: #668e45;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

                                    /* ---------------------------- */
                                    /*   Drop Down Recipes Button   */
                                    /* ---------------------------- */

.RecipesDropDown {
    overflow: hidden;
}

.RecipesDropDown .RecipesButton {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;
}

.navbar a:hover, .RecipesDropDown:hover .RecipesButton {
    background-color: #03fc77;
}

.DropDown-Content-Recipes {
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.DropDown-Content-Recipes a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.DropDown-Content-Recipes a:hover {
    background-color: #ddd;
}

.RecipesDropDown:hover .DropDown-Content-Recipes {
    display: block;
}

                                    /* ---------------------------- */
                                    /*    Drop Down Terms Button    */
                                    /* ---------------------------- */

.TermsDropDown {
    overflow: hidden;
}

.TermsDropDown .TermsButton {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;
}

.navbar a:hover, .TermsDropDown:hover .TermsButton {
    background-color: #03fc77;
}

.DropDown-Content-Terms {
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.DropDown-Content-Terms a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.DropDown-Content-Terms a:hover {
    background-color: #ddd;
}

.TermsDropDown:hover .DropDown-Content-Terms {
    display: block;
}
                                    /* ---------------------------- */
                                    /*    Drop Down Diet Button    */
                                    /* ---------------------------- */

.DietDropDown {
    overflow: hidden;
}

.DietDropDown .DietButton {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;
}

.navbar a:hover, .DietDropDown:hover .DietButton {
    background-color: #03fc77;
}

.DropDown-Content-Diet {
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.DropDown-Content-Diet a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.DropDown-Content-Diet a:hover {
    background-color: #ddd;
}

.DietDropDown:hover .DropDown-Content-Diet {
    display: block;
}
                                    /* ---------------------------- */
                                    /*    Drop Down Diet Button    */
                                    /* ---------------------------- */

.WeeklyDropDown {
    overflow: hidden;
}

.WeeklyDropDown .WeeklyButton {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;
}

.navbar a:hover, .WeeklyDropDown:hover .WeeklyButton {
    background-color: #03fc77;
}

.DropDown-Content-Weekly {
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.DropDown-Content-Weekly a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.DropDown-Content-Weekly a:hover {
    background-color: #ddd;
}

.WeeklyDropDown:hover .DropDown-Content-Weekly {
    display: block;

I tried flex and block inline in the .nav but none worked, white border is to show the button size.

Edit: after adding

.navbar {
    overflow: hidden;
    background-color: #668e45;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

and modifying width from 20% to fit-content the buttons now work, the border is around the button text not around the whole green div tho. If a better work around fits please let me know.

Upvotes: 1

Views: 5673

Answers (2)

user16639239
user16639239

Reputation:

I think you want something like this?

You can achieve this by using flexbox, Create a div in flexbox and wrap all the Div inside it. and make sure all you use flex-direction: row; to create multiple div in a row. and to make it responsive apply media query in it.

Learn media queries

Learn Flex box

<!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>Document</title>
</head>

<body>
  <style>
    .wrap {
      display: flex;
      flex-direction: row;


    }

    .dw {
      width: 180px;
      margin-left: 1px;
      height: 30px;
      display: flex;
      justify-content: center;
      padding-top: 14px;
      border-radius: 20px;
      background-color: #3A800D;

    }

    a {
      color: white;
      text-decoration: none;
    }



    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 16px;
      width: 180px;
      padding-top: 14px;
      border-radius: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: #3A800D;
      font-family: inherit;
      margin: 0;
    }

    .navbar a:hover,
    .dropdown:hover .dropbtn {
      background-color: #3A800D;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #3A800D;
      border-radius: 30px;
      width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }



    .dropdown:hover .dropdown-content {
      display: block;
    }

    @media only screen and (max-width: 600px) {
       .wrap{
       display: flex;
       flex-direction: column;
       align-items: center;
       
  }
  .dw{
    margin-top: 10px;
  }
  .dropbtn , .dropdown{
    margin-top: 10px;
  }
}
  </style>

  <div class="wrap">

    <div class="dw">
      <a href="">Home</a>

    </div>

    <div class="dw">
      <a href="">Recipes</a>

    </div>

    <div class="dw">
      <a href="">Cooking Terms</a>

    </div>


    <div class="dropdown">
      <button class="dropbtn">Cooking Diet
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        
        <a href="#">Link 1</a>
        <hr>
        <a href="#">Link 2</a>
        <hr>
        <a href="#">Link 3</a>
      </div>
    </div>

    <!-- <div class="dw">
      <a href="">Contact Us</a>

    </div> -->
  </div>
</body>

</html>

Let me know if this will help you.

Use full screen page to preview.

Upvotes: 1

Marijus12
Marijus12

Reputation: 56

Try this in your smaller divs CSS:

float: left;

It will align divs in 1 line all left

Upvotes: 1

Related Questions