I have problem in using 3 DIV tags in order to have 3 blocks in a row

Related searches

I started learning HTML/CSS recently and I'm trying to design the first page of a site by using these 2! I want to have 3 parts including logo, search box and signup button (from right to left) in the header part but I have a problem in it. The signup part doesn't stay in a row which other parts are. What's the problem with my code?

Here's my code:

body {
    background: #ffffff;
    padding: 0;
    margin: 0;
}

.Header {
    height: 93px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.Logo {
    display: block;
    background: url('images/logo.png') no-repeat right center;
    height: 77px;
    width: 319px;
    float: right;
    margin: auto;
}

.Search {
    height: 93px;
    width: 220px;
    float: left;
    border-right: 1px solid #d1d5dc;
    border-left: 1px solid #d1d5dc;
}
   
 .Search input[type=text] {
        border: none;
        direction: rtl;
        font-family: Tahoma;
        font-size: 16px;
        background: url('images/srch.png') no-repeat right center;
        padding: 5px 25px 5px 5px;
        margin: 25px 10px 0 0;
    }

.Sign_up input[type=button] {
    float: left;
    height: 93px;
    width: 100px;
    border-right: 1px solid #d1d5dc;
    border-left: 1px solid #d1d5dc;
    border-bottom: 8px solid #c00000;
    direction: rtl;
    font-family: Tahoma;
    font-size: 16px;
    background: url('images/sign_up.png') no-repeat right center;
}
 <div class="Header">
            <a href="." class="Logo">
                &nbsp;
            </a>

            <div class="Search">
                <input type="text" placeholder="search" />
                &nbsp;
            </div>
           
           <div class="Sign_up">
               <input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
           </div>

            <div class="clear"></div>

 </div>
            

Remove float: right and replace margin into margin-left from class .Logo.

body {
            background: #ffffff;
            padding: 0;
            margin: 0;
        }

        .Header {
            height: 93px;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .Logo {
            display: block;
            background: url('images/logo.png') no-repeat right center;
            height: 77px;
            width: 319px;
            margin-left: auto;
            text-align: center;
            background: #d1e3e6;
        }

        .Search {
            height: 93px;
            width: 220px;
            float: left;
            border-right: 1px solid #d1d5dc;
            border-left: 1px solid #d1d5dc;
        }

        .Search input[type=text] {
            border: none;
            direction: rtl;
            font-family: Tahoma;
            font-size: 16px;
            background: url('images/srch.png') no-repeat right center;
            padding: 5px 25px 5px 5px;
            margin: 25px 10px 0 0;
        }

        .Sign_up input[type=button] {
            float: left;
            height: 93px;
            width: 100px;
            border-right: 1px solid #d1d5dc;
            border-left: 1px solid #d1d5dc;
            border-bottom: 8px solid #c00000;
            direction: rtl;
            font-family: Tahoma;
            font-size: 16px;
            background: url('images/sign_up.png') no-repeat right center;
        }
    <div class="Header">
        <a href="." class="Logo">
            All Set
        </a>

        <div class="Search">
            <input type="text" placeholder="search" />
            &nbsp;
        </div>

        <div class="Sign_up">
            <input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
        </div>

        <div class="clear"></div>

    </div>

How to float three div side by side using CSS?, Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display etc with a free online placement preparation. course. </ div >. < div id = "middlebox" > elements (div) which behaves like td. display:table-row;This property Article Tags :. Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.

Add

display: inline;

to each of their css

eg

.Search {
    display: inline;
    height: 93px;
    width: 220px;
    float: left;
    border-right: 1px solid #d1d5dc;
    border-left: 1px solid #d1d5dc;
}

 .Search input[type=text] {
      display: inline;
      border: none;
      direction: rtl;
      font-family: Tahoma;
      font-size: 16px;
      background: url('images/srch.png') no-repeat right center;
      padding: 5px 25px 5px 5px;
      margin: 25px 10px 0 0;
   }

   .Sign_up input[type=button] {
      display: inline;
      float: left;
      height: 93px;
      width: 100px;
      border-right: 1px solid #d1d5dc;
      border-left: 1px solid #d1d5dc;
      border-bottom: 8px solid #c00000;
      direction: rtl;
      font-family: Tahoma;
      font-size: 16px;
      background: url('images/sign_up.png') no-repeat right center;
 }

What is the easiest way to line up three div elements side by side , What is the easiest way to line up three div elements side by side using CSS, and To get started all you have to is link in the Bootstrap style sheet into the head of You can experience some problems when using this techniques, for example There are many ways to achieve this , using float,table,inline-block,position� To reduce the size of Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

 <div class="Header">
            <div>
<a href="." class="Logo">
                Logo Goes Here
            </a>
            </div>
            <div class="Search">
                <input type="text" placeholder="search" />
                &nbsp;
            </div>

           <div class="Sign_up">
               <input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
           </div>
 </div>

Css

.header{ width: 100%;

div{
   display: inline-block;
   width: 33.3%;
   background: yellow;
}

div:nth-child(1), div:nth-child(3){
   background:red;
}

How To Create a Three Column Layout, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved� These columns have been created by wrapping three DIV elements into one container DIV. The container has its width set to 900 pixels and each column is set to 300 pixels wide. In order to make the columns line up you need to set the float style of each column DIV to left. The HTML below shows how this is arranged in simple mark-up.

Your header class is a flex container and then you use floats for the flex items in the container. So you are mixing these two concepts, but in my experience it is better to keep it with one of them. Anything you want to achieve, you can do with flex OR with floats.

As flex is the more modern (and simple) approach, I would stick with that one. Here is a very good article about aligning items in a flex container: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

CSS � Bootstrap, This can be contrasted with the two-dimensional model of CSS Grid Layout, If flex-direction is set to row then the cross axis runs in the block Try editing the items or adding additional items in order to test the initial behavior of flexbox. If we have three 100 pixel-wide items in a container which is 500� Many developers have used tables for all sorts of tasks in the past. Of course, there is the use of tables to display data. However, tabular arrangements are also useful for creating forms to ensure the various elements align in a predictable manner. This second use of tables is problematic because it confuses some software such as screen readers.

Just remove the floating property because when you're using flexbox method to align the column no need to use float to align the column.

For further assistance comment for more information.

* {
    box-sizing: border-box;
    position: relative;
}

body {
    background: #ffffff;
    padding: 0;
    margin: 0;
}

.Header {
    height: 93px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.Logo {
    display: block;
    background: url('https://via.placeholder.com/200') no-repeat right center;
    height: 93px;
    width: 300px;
    margin-left: auto;
}

.Search {
    height: 93px;
    width: 220px;
    border-right: 1px solid #d1d5dc;
    border-left: 1px solid #d1d5dc;
}

.Search input[type=text] {
    border: none;
    direction: rtl;
    font-family: Tahoma;
    font-size: 16px;
    background: url('images/srch.png') no-repeat right center;
    padding: 5px 25px 5px 5px;
    margin: 25px 10px 0 0;
}

.Sign_up input[type=button] {
    height: 93px;
    width: 100px;
    border-right: 1px solid #d1d5dc;
    border-left: 1px solid #d1d5dc;
    border-bottom: 8px solid #c00000;
    direction: rtl;
    font-family: Tahoma;
    font-size: 16px;
    background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
    <a href="#" class="Logo"></a>

    <div class="Search">
        <input type="text" placeholder="search" />
    </div>

    <div class="Sign_up">
        <input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
    </div>

    <div class="clear"></div>
</div>

Basic concepts of flexbox, See how to use the tag to group HTML elements and style them with CSS, how to apply class, id, style, and other attributes to tag. Try Examples.

div tag can be used for creating a layout of web pages in the below examples shows creating a web layout we can also create web layout using tables tag but table tags are very complex to modify the layout The div tag is very flexible in creating web layouts and easy to modify. in below example will show grouping of HTML element using div tag

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

There are at least four ways of doing this. 1. The worst way would be to build a table with one row and two cells, each containing the divs you want on the same line.

Comments
  • logo will be aligned left side or right side?
  • It should be on the right side