A.Jaasma February 2016

how to make div elements display inline (other version)

I've read that someone asked the same question but with a different layout/purpose..

I can't seem to figure out the answer given because my code looks actually quite diffrent because i am using a div inside a div, because I will need this in future coding..

I need the words to display inline, but so that I can still move each one sepperatly, now they are all in a line under eachother like this, http://prntscr.com/a0ivs5

This is my code,

body, html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}

header {
  height: 5%;
  border-bottom: thick solid grey;
}

.img {
  width: 25%;
  height: 30%;
  background-color:#f0f0f0;
  float: left;
}
.antwoord {
  float: left;
  width: 95%;
  height: 25px;
  background-color: white;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
}

.move1 {

}
.move2 {
  margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}

.word {
  float: left;
}

footer {
    border-top: thick solid grey;
    height: 5%;
}

.points {
    float: right;
}
.container {
  width: 100%;
  height: 90%;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.sprint {
  float: right;
}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Words</title>

    <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="ut        

Answers


Aziz February 2016

Please note that CSS class names are case-sensitive, .word {...} will not work for <div class="Word">...</div>

Anyway, your words are wrapped in 3 block level elements, you'd have to make them all inline to get your desired effect

div.Word > div.tekst > p

.Word, .Word .tekst, .Word p {
  display:inline;
}

jsFiddle

body,
html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}

.container {
  width: 100%;
  height: 90%;
}

.Word, .Word .tekst, .Word p {
  display:inline;
}
<div class="container">

  <div class="Word" id="word1">
    <div class="tekst" id="tekst1">
      <p>Cat</p>
    </div>
  </div>
  <div class="Word" id="word2">
    <div class="tekst" id="tekst2">
      <p>spoon</p>
    </div>
  </div>
  <div class="Word" id="word3">
    <div class="tekst" id="tekst3">
      <p>meal</p>
    </div>
  </div>
  <div class="Word" id="word4">
    <div class="tekst" id="tekst4">
      <p>passport</p>
    </div>
  </div>
  <div class="Word" id="word5">
    <div class="tekst" id="tekst5">
      <p>egg</p>
    </div>
  </div>
  <div class="Word" id="word6">
    <div class="tekst" id="tekst6">
      <p>beak</p>
    </div>
  </div>
  <div class="W 


Timble February 2016

If I understand what you're asking correctly, your problem is that your ".word" class is lowercase while it is referenced in the HTML as "Word". So try changing the .word class to

.Word { display: inline-block; }

Changing the above makes all the words that were displaying line after line in one line now.

Fiddle

Post Status

Asked in February 2016
Viewed 2,451 times
Voted 11
Answered 2 times

Search




Leave an answer