0

I am trying to make a simple page, with 3 div's, 1 is top div, stands as header, other 2 are each next to other with small gap. So far so good, this is how my code looks like:

HTML 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title></title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body>
  <div id="main">
    <div class="head">GIMP & Inscape galerija</div>
    <div class="content"><button>Test</button></div>
    <div class="outcome">Here is the outcome, that will come, when i will press buttons</div>
  </div>
 </body>
</html>

and CSS

body {
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
}
#main {
    width: 1400px;
    margin: 0 auto;
    position: relative;
}
.head {
    width: 1400px;
    height: 100px;
    margin: 0 auto;
    border: solid 1px;
    border-radius: 25px;
    text-align: center;
    line-height: normal;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
    margin-top: 50px;
}
.content {
    width: 350px;
    margin: 0 auto;
    height: 600px;
    border: solid 1px;
    margin: 35px 0px 0px 0px;
    border-radius: 10px;
    display: inline-block;
}
.outcome {
    width: 991px;
    height: 600px;
    border: solid 1px;
    margin: 0 auto;
    margin-left:50px;
    border-radius: 10px;
    display: inline-block;
}

Before I add any buttons, it's okay, everything is in line as it should be. When I add buttons, my outcome div moves down, and it happens for each button I tried. Would be nice if someone can tell me, what's wrong with that and maybe find some mistakes on the code.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Nighterance
  • 31
  • 4
  • Sorry, I am not fully understanding the question. So you want all 3 blocks to be in a single row? (Before and after adding the button) – leocreatini Jan 16 '17 at 18:34
  • Go ahead and add the code that you have there to a Codepen or SO's code editor. I just added it myself to Codepen and I can't replicate the problem you're having, so I was hoping that maybe you can. – Ryan Green Jan 16 '17 at 18:36
  • I added a fiddle to play around with the code for anyone interested. https://jsfiddle.net/px2mw1ck/ can't really see where the problem is? Changed the widths to %-ages but other than that left is as was. And to me it looks fine. – deadfishli Jan 16 '17 at 18:36
  • i ran your code in jsfiddle, there outcome div goes down when no buttons are present, when buttons are there it's correct. Please clarify otherwise edit your question – varunsinghal65 Jan 16 '17 at 18:37
  • I updated the code. Tryed to add more than one button, it still did it. – Nighterance Jan 16 '17 at 18:40
  • @varunsinghal65 I Will need to add those buttons, but if i add more buttons, the outcome div jumps down, and interesting is that, if I have button and no text on outcome or no button but text on outcome, those divs are not static, they move. I don't want them to move. – Nighterance Jan 16 '17 at 18:43

2 Answers2

0

I put the code in a JSBin. It seems to work fine with one or more buttons and these updates should help achieve that.

Changes made:

  • Added display: flex and flex-direction: column properties in the #main. I think that is what you were going for in the .head originally.
  • Added a .row to wrap both the .content and .outcome.
  • Refactored the .content and .outcome CSS to combine similar code. As well as make them use % widths instead of a fixed width to help with responsiveness.

Here's the full CSS:

* {
  box-sizing: border-box;
}

#main {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  height: 100px;
  margin: 50px auto 35px;
  border: solid 1px;
  border-radius: 25px;
  text-align: center;
  line-height: normal;
  justify-content: center;
  align-content: center;
  flex-direction:column;
}

.row {
  display: flex;
  flex-direction: row;
}

.content,
.outcome {
  height: 600px;
  border: solid 1px;
  border-radius: 10px;
}

.content {
  width: 33%;
  margin: 0 30px 0 0;
}

.outcome {
  width: 66%;
}

http://jsbin.com/kihojed/edit?html,css,output

leocreatini
  • 676
  • 1
  • 9
  • 18
0

You can add float:left to the content div and float:right to the outcome div. This will ensure div doesn't go down.

.content {
    width: 350px;
    margin: 0 auto;
    height: 600px;
    border: solid 1px;
    margin: 35px 0px 0px 0px;
    border-radius: 10px;
    float:left; //Added this
}
.outcome {
    width: 991px;
    height: 600px;
    border: solid 1px;
    margin: 0 auto;
    border-radius: 10px;
    float:right; //Added this
    margin-top:35px; //Added this to bring outcome div at same height
}

https://jsfiddle.net/varunsinghal65/e8t79jby/#&togetherjs=EwUt1Vdnd8

Here is your ans : Why is this inline-block element pushed downward?

This might help you !

Community
  • 1
  • 1
varunsinghal65
  • 536
  • 1
  • 5
  • 20