CODEWITHSUNDEEP
htmlcss
user4708518
user4708518

Reputation:

HTML displaying two div's on the same line

Just wondering if anyone can help me to get 1st half and 2nd half on this codepen to display on the same line? I have tried display:inline; however this did not fix the issue.

http://codepen.io/EuanR/pen/BNEBvE

HTML: 

<HTML>
<HEAD>
  <title>Homepage</title>
</HEAD>

<HEADER>
  <H1 id="landingpagelg">Header</H1>
  <H2 id="landingpagesm">Sub Header</H2>
</HEADER>

<BODY>
  <div class="footerwrapper">
    <div class="BFS">
      <P>1st half</P>
    </div>
    <div class="BLFS">
      <P>2nd half</P>
    </div>
  </div>
  </script>

</html>

CSS: 

a {
  text-decoration: none;
}

body {
  background-color: #161616;
}

header {
  height: 100%;
  background-image: url(http://i.imgur.com/11nVLmd.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center
}

#landingpagelg {
  font-family: Caviar Dreams;
  font-size: 42px;
  color: #FFF;
  letter-spacing: 1px
}

#landingpagesm {
  font-family: Caviar Dreams;
  font-size: 21px;
  color: #FFF
}

#CMSub {
  min-width: 75px;
}

a {
  color: #000;
}

a.hover {
  color: 0000EE;
}

::selection {
  background: #FFB870;
  /*#CCCCCC*/
}

::-moz-selection {
  background: #FFB870;
}

img::selection {
  background: transparent
}

img::-moz-selection {
  background: transparent
}

input {
  width: 150px;
  border: 1px solid;
  border-radius: 6px;
  height: 25px;
  padding: 4px;
}

textarea {
  border: 1px solid;
  max-width: 500px;
  max-height: 250px;
  border-radius: 5px;
  width: 250px;
  height: 125px;
}

#github {
  padding-right: 5px;
}

.footerwrapper {
  width: 100%;
}

.BFS {
  height: 150px;
  width: 50%;
  background-color: #161616;
}

.BLFS {
  height: 150px;
  width: 50%;
  background-color: #99CCFF;
}

Upvotes: 2

Views: 144

Answers (4)

Bennett Brown
Bennett Brown

Reputation: 5383

Use 

.BFS {float:left;}
.BLFS {float:right;}

Alternatively put the BLFS element first in your HTML and float it to the right. Then the .BFS{float:left;} is unnecessary since it will fill on the left anyway.

Upvotes: 0

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

If you don't want to edit your CSS, then simply add the following lines

.footerwrapper {
    font-size: 0; /*Removes white space in inline-block elements*/
}

.BFS {
    box-sizing: border-box;
    display: inline-block;
}

.BLFS {
    box-sizing: border-box;
    display: inline-block;
}

Make sure you set the font-size in every element that is a child of .footerwrapper

Upvotes: 0

jKIM
jKIM

Reputation: 155

.footerwrapper {
    width: 100%;
    border: 1px solid black;
    overflow: hidden;
}

.BFS {
    height: 150px;
    background-color: #161616;
    width: 50%;
    float:left; /* add this */
}

.BLFS {
    height: 150px;
  width: 50%;
  background-color: #99CCFF;
  float:left; /* add this */
}

Hope this helps

Upvotes: 0

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

    .footerwrapper {
  width: 100%;
  display:flex;
}

Display Flex solves the issue

Upvotes: 1

Related Questions