CODEWITHSUNDEEP
htmlcss
Martin Chapman
Martin Chapman

Reputation: 59

Two divs side by side - already tried using float and display: inline block;

I want to put two divs side by side but float and display aren't having an effect. I want the "1" to go all the way left and the sentence to be where the "1" is right now. So I want the "lineCounter" div to be floated all the way left and the "englishDiv" to be centered in "standardTranslationMasterDiv". I'm sure I'm making an obvious mistake but I don't know what it is.

Thanks for the help.

enter image description here

* {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  box-sizing: border-box;
  margin: 0;
  background: #f2f3f4;
}

#standardTranslationMasterDiv {
  text-align: center;
  float: left;
  height: 75vh;
  width: 32.66vw;
  padding-top: 5vh;
}


.lineCounter {
  float: left;
}

.englishDiv {
  float: left;
}
<div id="translationContent">

    <div id="standardTranslationMasterDiv">
       
            <div id="lineCounter">
                1
            </div>
            
            <div id="englishDiv">
                <span class="1">
                    When
                </span>
                <span class="3">
                    God
                </span>
                <span class="1">
                    began
                </span>
                <span class="2">
                    to create
                </span>
                <span class="5">
                    heaven
                </span>
                <span class="6">
                    and
                </span>
                <span class="7">
                    earth
                </span>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 52

Answers (3)

Ibrahim Hasnat
Ibrahim Hasnat

Reputation: 955

Try to using Grid CSS.

Suppose, if you want two columns grids, then put the following code in your parent class/id.

.parrent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

If you want three columns grids, then you can consider the following code.

.parrent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

You can also change the column width as per your requirements.

More details about Grid CSS. Click here

Upvotes: 2

sunny
sunny

Reputation: 49

if you want line counter or simply to use serial number then use line counter div out of standardTranslationMasterDiv div this way it will be shown side by side. it is like making four column. you can use grid or flex instead. and the from the text you are using looks like bible lines from genesis. Plz let me know if my answer is wrong.

Upvotes: 0

lupz
lupz

Reputation: 3638

You can use flexbox (or grid) for this. Those are layout features of html/css that where designed exactly for this. Float is for things that are actually floating in text such as images and has a lot of problems when used for layouts.

I added the simple display: flex; property to the standardTranslationMasterDiv and removed the float-stuff to make it a flex-container. An this is basically all it takes.

Check out this guide to tweak this for your needs: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  box-sizing: border-box;
  margin: 0;
  background: #f2f3f4;
}

#standardTranslationMasterDiv {
  display: flex;
  height: 75vh;
  width: 32.66vw;
  padding-top: 5vh;
}


.lineCounter {
}

.englishDiv {
}
<div id="translationContent">

    <div id="standardTranslationMasterDiv">
       
            <div id="lineCounter">
                1
            </div>
            
            <div id="englishDiv">
                <span class="1">
                    When
                </span>
                <span class="3">
                    God
                </span>
                <span class="1">
                    began
                </span>
                <span class="2">
                    to create
                </span>
                <span class="5">
                    heaven
                </span>
                <span class="6">
                    and
                </span>
                <span class="7">
                    earth
                </span>
            </div>
        </div>
    </div>

Upvotes: 0

Related Questions