All geek questions in one place

HTML DIV Overflow, how to stop?

What I'm trying to achieve: enter image description here

I am trying to arrange three elements next to each other. Two containers for content with a div divider between them. I have problems with overflow with the right content. It always appears below the other two divs.

It may be a problem with the location of the center separator, but I can’t think of a better method for positioning it.

Codepen of what I currently have: http://codepen.io/anon/pen/vNNKpB?editors=110

Here is my CSS:

.contact {
height: 300px;
}

.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}

.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}

.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}

.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
+4
source share
4 answers

% .container, % . .

, flexbox :

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* ... another styles here */
}

: http://codepen.io/anon/pen/RWWROr

flexbox, , http://autoprefixer.imtqy.com/

+1

div div .centre-divider, , display: inline-block; .centre-divider:

body {
  font-family: Garamond, serif;
}

h1 {
  font-family: Minion Pro, serif;
  text-align: center;
  font-size: 80px;
}

.contact {
  height: 300px;
}

.container {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}

.centre-divider {
  width: 50%;
  display: inline-block;
  height: 300px;
}

.centre-divider > div {
  width: 1px;
  height: inherit;
  background: gray;
  margin: 0 auto;
}

.left-box {
  width: 25%;
  float: left;
  height: 300px;
  background-color: lightgray;
}

.right-box {
  float: right;
  width: 25%;
  height: 300px;
  background-color: lightgrey;
}
<body>
  <header>
    <h1>Heading</h1>
  </header>

  <div class="contact">
    <div class="container">
      <div class="left-box">

      </div>
      <div class="centre-divider">
        <div></div>
      </div>
      <div class="right-box">

      </div>
    </div>
  </div>


</body>

, .

+1

CSS:

body {
  font-family: Garamond, serif;
}

h1 {
  font-family: Minion Pro, serif;
  text-align: center;
  font-size: 80px;
}

.contact {
  height: 300px;
}

.container {
  width: 70%;
  float:left;
  margin-left: 15%;
  margin-right: 15%;
}

.centre-divider {
  width: 0.1%;
  float:left;
  margin-left: 5%;
  margin-right: 4%;
  height: 300px;
  background-color: darkgray;
}

.left-box {
  width: 400px;
  float: left;
  height: 300px;
  background-color: lightgray;
}

.right-box {
  float: left;
  width: 400px;
  height: 300px;
  background-color: lightgrey;
}
0

you can use display: inline-block;instead of floating elements. when you are text-align: centeron a div .contact, then .left-box, .right-boxand are .centre-dividerautomatically centered on the interval (so you do not need to calculate it yourself, and it still responds to the width of the screen.

body {
    font-family: Garamond, serif;
}

h1 {
    font-family: Minion Pro, serif;
    text-align: center;
    font-size: 80px;
}

.contact {
    height: 300px;
}

.container {
    text-align: center;
}

.centre-divider {
    width: 2px;;
    display: inline-block;
    margin-left: 50px;
    margin-right: 50px;
    height: 300px;
    background-color: darkgray;
}

.left-box {
    width: 200px;
    display: inline-block;
    height: 300px;
    background-color: lightgray;
}

.right-box {
    display: inline-block;
    width: 200px;
    height: 300px;
    background-color: lightgrey;
}
<body>
  <header>
    <h1>Heading</h1>
  </header>

  <div class="contact">
    <div class="container">
      <div class="left-box">

      </div>
      <div class="centre-divider"></div>
      <div class="right-box">

      </div>
    </div>
  </div>


</body>
Run code
0
source

Source: https://habr.com/ru/post/1606779/

More articles:


All Articles