HTML DIV Overflowing, How To Stop?

Tags: html,css

Problem :

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:

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;

Solution :

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 */


But if you use flexbox don't forget about browser prefixes, you can get them here

    CSS Howto..

    Wordpress how to tell my css version

    How to upgrade web project with latest fancy Bootstrap & SASS

    How to parse and extract CSS selectors as strings?

    How to place three div tags one below another?

    How do I make a placeholder for a 'select' box?

    How to prevent inheritance of any css style of parent node to child node?

    How to override HTML with CSS

    How to rewrite a CSS @import statement

    css how to remove the empty space at the left

    How to use easily svg as icon?

    How to set a style one a parent element [duplicate]

    How to Create Responsive Web Page With Static Header?

    how to write a css that only can be visible on desktop in bootstrap

    How to find an element using Watir by inline css styles

    How to add + and - to my menu tabs [closed]

    How to increase the duration of :active in css?

    How to override custom placeholder css

    How to apply a CSS property to an element using it's CSS path in Javascript?

    html-css-how to make opeanable vertical menu [closed]

    jquery how to regex css style positive to negative, negative to positive?

    How to create a border that fully covers the adjacent corners in CSS?

    CSS: How to use Transform property on a bootstrap grid class

    How to properly pad an HTML link?

    CSS radio button border how to remove it?

    CSS - How it works

    CSS - How to align content to middle using bootstrap?

    How to rotate a line(x1=50,y1=50,x2=50,y2=10) with respect to x=50,y=50 as center using CSS?

    How does one style element within a label say?

    How to get Angular Material Design's directive to scale to image properly in IE?

    How Do I Add CSS Class to body Element in Meteor?