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: 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;
}


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

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/


    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?