CODEWITHSUNDEEP
htmlcss
Björn C
Björn C

Reputation: 4008

How to place the div elements inline?

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/

Upvotes: 0

Views: 68

Answers (6)

Pete
Pete

Reputation: 58422

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)

Upvotes: 1

shahabvshahabi
shahabvshahabi

Reputation: 955

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;
}

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

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 
}

Upvotes: 2

Charantej Golla
Charantej Golla

Reputation: 598

By Adding float:left / display:inline to both classes you can achieve it.

Here is the updated fiddle linkUpdated fiddle

Upvotes: 1

fernando
fernando

Reputation: 822

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;
}

Upvotes: 0

Lulceltech
Lulceltech

Reputation: 1702

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;
}

Upvotes: 0

Related Questions