How to place the div elements inline? - html

Question

I'm trying to place these two divs inline.
HTML
<div class="thisFlak">
</div>
<div class="thisFlakNotes">
</div>
CSS
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
}
I cannot mess with ".thisFlak" to much because it hold alot of other stuff.
FIDDLE
https://jsfiddle.net/xwzcbn6w/

Answer 1

DEMO
CSS
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}

Answer 2

By Adding float:left / display:inline to both classes you can achieve it.
Here is the updated fiddle linkUpdated fiddle

Answer 3

display:inline-block; will allow you to keep the dimensions and put your divs on the same line. It will treat the divs like words in a sentence though so you will need to comment out any space between them and as they are different heights, you will need to add vertical alignment:
.thisFlak{
vertical-align:top;
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display:inline-block;
}
.thisFlakNotes{
vertical-align:top;
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display:inline-block;
}
<div class="thisFlak">
</div><!-- comment out this space
--><div class="thisFlakNotes">
</div>
Update
Also if you don't want the boxes to wrap when the page is too small for them to fit on one line, you will need to add white-space:nowrap to the parent (or make sure the width of the parent is wider than the two children)

Answer 4

What you're looking for is:
display: inline-block;
Your code:
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display: inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display: inline-block;
}

Answer 5

float...
https://jsfiddle.net/maky/xwzcbn6w/2/
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float: left;
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float: left;
}

Answer 6

just put display : inline-block or float : left to each div
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float : left;
display : inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float : left;
display : inline-block;
}