CODEWITHSUNDEEP
htmlcss
senojoeht
senojoeht

Reputation: 312

HTML DIV Overflowing, How To Stop?

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

I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.

It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.

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

Here's 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;
}

Upvotes: 4

Views: 152

Answers (4)

indubitablee
indubitablee

Reputation: 8216

you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive 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>

Upvotes: 0

starikovs
starikovs

Reputation: 3398

If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.

The new way of the positioning you want is to use flexbox without floats: 

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

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

But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/

Upvotes: 1

Chrillewoodz
Chrillewoodz

Reputation: 28368

You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .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>

You will have to adjust the widths but you get the idea.

Upvotes: 1

Pavan Gawade
Pavan Gawade

Reputation: 55

Just Add this 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;
}

Upvotes: 0

Related Questions