CSS Positioning Elements Next to Each Other

CSS Positioning Elements Next to each other

If you want them to be displayed side by side, why is sideContent the child of mainContent? make them siblings then use:

float:left; display:inline; width: 49%;

on both of them.

#mainContent, #sideContent {float:left; display:inline; width: 49%;}

CSS positioning - two elements next to each other

You could use...

float: left;

on your div 'logtable'

I would advise using DIVs to do you alignment of content so wrap the table in a DIV.
I also prefer to use inline-block over float left and gives more predictable results.

so...

<div id="page">
 <div id="divTable" class="InsideContent">
     <table id="logtable">
      Left
     </table>
  </div>

 <div id="divMessage" class="InsideContent">
  Right
 </div>
</div>

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}
.InsideContent{
    display:inline-block;
}
}
#divTable {
    width: 800px;
}
#divMessage {
    width: 350px;
}

Code needs tidying up but you get the idea...

JSFiddle http://jsfiddle.net/3N53d/

How to position two elements next to each other

.div-block-10 {

  display: flex;

  align-items:center;

  height:100%;

  margin: 98px 0 0;

  text-align: left;

  justify-content:center;

}

<div th:if="${isLogged}" class="div-block-10">

            <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>

            <div th:if="${!user.isEmailValidated()}" class="div-block-13">

                <div class="email_confirmed">

                    <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>

                </div>

            </div>

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Style HTML form to place elements next to each other

display : flex on the parent div or display : inline-block on the child input elements will position elements next to each other

How to position elements next to each other in CSS without using float. i.e. main content next to sidebar

Your best bet is to have a main grid that contains the sidebar and a grid inside it that contains the main content:

body,

html {

  background: darkgrey;

  height: 100%;

  margin: 0;

}

#horizontal-menu {

  background: lightblue;

  padding: 8px;

  margin-bottom: 15px;

}

#horizontal-menu p {

  margin: 0;

}

.grid-container {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr;

  grid-gap: 15px;

  height: 100%;

}

.side-bar {

  background: red;

  padding: 0;

  margin: 0;

  height: 100%;

  grid-column: 1 / 2;

}

.grid-items-container {

  grid-column: 2 / 3;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(2, 1fr);

  grid-gap: 30px 20px;

  background: #E1E1E1;

  padding: 15px;

}

.side-bar p {

  padding: 0;

  margin: 0;

}

.grid-items {

  font-weight: bold;

}

.grid-item1 {

  background: greenyellow;

}

.grid-item2 {

  background: rosybrown;

}

.grid-item3 {

  background: cadetblue;

}

.grid-item4 {

  background: darkturquoise;

}

.grid-item5 {

  background: darkkhaki;

  grid-column: span 2;

}

.grid-item6 {

  background: lightblue;

  grid-column: span 2;

}

<div id="horizontal-menu">

  <p>Menu</p>

</div>

<div class="grid-container">

  <div class="side-bar">

    <p>Side Bar</p>

  </div>

  <div class="grid-items-container">

    <div class="grid-items grid-item1">

      <p>Grid Item 1</p>

    </div>

    <div class="grid-items grid-item2">

      <p>Grid Item 2</p>

    </div>

    <div class="grid-items grid-item3">

      <p>Grid Item 3</p>

    </div>

    <div class="grid-items grid-item4">

      <p>Grid Item 4</p>

    </div>

    <div class="grid-items grid-item5">

      <p>Grid Item 5</p>

    </div>

    <div class="grid-items grid-item6">

      <p>Grid Item 6</p>

    </div>

  </div>

</div>

---

Related Topics