CSS Floating with Overlap

CSS floats & Overlapping boxes

When you float an element you take it out of the flow of the DOM. To make it interact with Box One, you need to float Box One as well:

#a {
    background-color: #FFFFCC;
    float: left;
    padding: 10px;
    width: 190px;
}

Notice the width is specified, too. This is because you want to put both boxes in a wrapper and specify the width of it, too:

HTML

<div id="wrapper">      
    <h1>Title</h1>
    <nav class="r-set">
        <p><a href="#">Two</a></p>
    </nav>
    <div id="a">
        <h3>One</h3>
    </div>
</div>

CSS

#wrapper{
    width: 445px;
}

Whenever you're floating elements it's a good idea to put them in a wrapper like this so you bring them back into the DOM, so to speak. This will avoid problems like you experienced with Box One rendering behind box 2.

Here's a jsFiddle bringing it all together. BTW, if you want Box Two to sit completely flush against Box One, take away its left margin.

EDIT:

To make Box Two static and Box One expandable you should use the same CSS and markup. Just take away Box One's float and width properties and give it a right-margin of 225px (the width of Box Two minus the right margin). Here's the updated jsFiddle.

Float Creates Overlapping Divs

You need to use the clear-fix. Insert the following after your floated div, and within the containing div.

<div class="clear"></div>

And add the following style:

.clear { clear:both; }

Example:

<div class="container">
  <div class="floatedDiv">Hello World</div>
  <div class="clear"></div>
</div>

CSS: Make two floating elements overlap

Use a negative margin-right on the left box so that the right box is allowed to overlap:

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

The 104 pixels is the overlap amount plus 4px for borders.

Here's a jsfiddle.

CSS Float content creating whitespace and overlapping other div

Try this:

#about-section {
    width: 100%;
    background-color: rgb(131, 111, 235);
}

Description

You are using #about-section id remove the height property or use height:auto, you have given a fixed height. And use float:left as well in p tag ids.

here your update code

float:left overlap on other elements

Okay, So a friend told me an acceptable solution, I don't really want to take the credit, but well, I have to close this.

The solution is to use flex-box instead of float, which are not really meant for what I wanted to do.

html:

<div class='wrapper'>
  <div id="random_div">
    random text message
  </div>
  <div class='message'>
    <p>
     warning 1
    </p>

    <p>
    warning 2
    </p>
  </div>
</div>

css:

#random_div {
  background: #fff;
  padding: 20px;
  font-size: 25px;
  width: 150px;
  margin: 15px;
}

p{
  background-color: orange;
  margin-right: 5px;
}

.wrapper {
  display: flex;
  align-items: center;
}

.message {
  flex-grow: 1;
}

result:
Sample Image

And now I just need to work a bit with the margin to have the desired output :)

CSS float causing element to overlap

If you add a coloured background to the pre elements in your first example, then it should become clear: float affects text wrapping, but does not fundamentally change the flow of the page or change the size of elements.

If you added text to your orange box in example 2, you should see that it is wrapped.

Edit: here's a demo: https://jsfiddle.net/tj1appLf/

float-css overlaps next to div image

You have .clearfix in your css, but you have not applied them to header whose contents you are floating.

Add the class to header - see demo below:

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');* {  box-sizing: border-box;}
body {  margin: 0;  font-family: 'Raleway', sans-serif;  text-align: center;}
img {  max-width: 100%;  height: auto;  width: auto;}
.container {  width: 95%;  max-width: 70em;  margin: 0 auto;}
.clearfix::after,section::after {  content: '';  display: block;  clear: both;}

/* typography================= */
.unstyled-list {  margin: 0;  padding: 0;  list-style-type: none;}

/* header================= */
header {  position: relative;  left: 0;  right: 0;  margin: 1em;}
.logo {  width: 200px;  height: 40px;}
nav ul {  margin: 0;  padding: 0;  list-style: none;}
nav li {  display: inline-block;  margin: 1em;  padding: 0.125em;}
nav a {  font-weight: 900;  text-decoration: none;  text-transform: uppercase;  font-size: .8rem;  padding: .75em;  color: #DDD;}

/* home-main================= */
.home-main {  background-image: url('../manjitcss/img/manjit-main.png');  background-size: cover;  background-position: center;  padding: 10em 0;}
@media(min-width:40rem) {  .logo {    float: left;    margin-top: .5em;  }  nav {    float: right;  }}
@media(min-width:60rem) {  .logo {    width: 250px;    height: 50px;  }  nav {    margin-top: .5em;  }  nav a {    font-size: 1.04em;  }}

<header class="clearfix">  <img src="http://placehold.it/50x50" alt="Foo logo" class="logo" />  <nav>    <ul>      <li><a href="">Home</a></li>      <li><a href="">About Me</a></li>      <li><a href="">Contact</a></li>    </ul>  </nav></header>
<section class="home-main">  <div class="container">   container  </div></section>

How to prevent Float contents overlap other contents below

You should set the .ptitle element to be positioned as relative, not absolute.

.ptitle {
   position: relative;
}

At least it worked for me. And for further formatting, use margin and padding the way you want the element to align in the page.

Stop floating DIVs from overlapping

Replace your

float: left;

with

display: inline-block;
position: relative;

and your

margin-top: ...;

with

top: ...;

float: left; make your element to a display: inline; and on that margin-top doesn’t work well: CSS display: inline-block does not accept margin-top?
but you can use postion:relative; to move your element to the right position.
Updated: http://jsfiddle.net/1m2e30rf/25/