Floating problem?

I am working on a design that should look like The following image:


For this to happen I have the following CSS

.wrapper {
  width: 80%;
  max-widt: 1284px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-size: .86rem;
}

.sidebar,
.verzenden,
.berichten {
  width: 50%;
  margin: 0 1%;
  float: left;
  position: relative;    
}

.sidebar {
  width: 24%;
  margin: 0;
}    

and the html

<div class="wrapper">
  <div class="leftbar sidebar"></div>
  <div class="verzenden"></div>
  <div class="berichten"></div> 
  <div class="rightbar sidebar"></div>      
</div>

But for some reason the sidebar on the right is pushed down to line up with div berichten.

What am I doing wrong? Thank you in advance

The problem here is that your berichten div accidentally gets placed in the position you want, whereas it’s actually going wrong. What the browser is doing is first drawing the left sidebar, then floating verzenden to the right of it, and then it wants to float berichten the right of verzenden, but that doesn’t fit, so you get a float drop as it’s called, and berichten drops below verzenden, but still floats up against the left sidebar. After that the browser is working from the top of the berichten div, since that is the last one drawn.

To solve you would need to wrap verzenden in berichten in a div that’s floating (left) and 50% wide. You can then remove float: left; and width: 50% from both verzenden and berichten and just let them flow naturally.

Alternatively you could let the left sidebar float left, the right sidebar float right, and then just put verzenden and berichten in the html without any floats and let them flow naturally. Basically

<div style="overflow: hidden"> <!-- contain floats -->
    <div style="float: left; width: 24%;"><!-- sidebar left --></div>
    <div style="float: right; width: 24%;"><!-- sidebar left --></div>
    <div><!-- verzenden --></div>
    <div><!-- berichten --></div>
</div>

(of course you want to use classes instead of inline styles, this is just for easy reading)

I personally prefer this later method because it flows the most naturally.

You like floats . There are several ways of creating a three column effect. One solution is to rearrange your HTML and float that right sidebar to the right.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/floating-problem/99341
Floating problem?
Sep 28, 4:24 AM

-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.wrapper {
    width: 80%;
    max-width: 1284px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: .86rem;
    margin: 0 auto;
}
.sidebar,
.verzenden,
.berichten {
    width: 50%;
    float: left;
    position: relative;    
    margin: 0 1%;
    height:200px;
    background:#00f;
}
.sidebar {
    width: 24%;
    margin: 0;
    height:400px;
}
.rightbar {
    float:right;
}
.verzenden {
    background:#0f0;
}
.berichten {
    background:#f00;
}

    </style>
</head>
<body>

<div class="wrapper">
    <div class="leftbar sidebar"></div>
    <div class="rightbar sidebar"></div>      
    <div class="verzenden"></div>
    <div class="berichten"></div> 
</div>

</body>
</html>

My preferred way to do this for IE8+ is to use display:table and display:table-cell (also assuming absolute positioning relative to columns is not required).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapper {
	width: 80%;
	max-width: 1284px;
	margin: 0 auto;
	z-index: 1;
 font-size: .86rem;
}
.sidebar {
	width: 24%;
	background:blue;
}
.table {
	display:table;
	table-layout:fixed;
	border-spacing:10px 0;
}
.tc {
	display:table-cell;
	vertical-align:top
}
.mid {background:red}
.verzenden {
	background:green;
	border-bottom:10px solid #fff;
	min-height:100px;
}
</style>
</head>

<body>
<!-- ie8+ only -->
<div class="wrapper table">
		<div class="leftbar sidebar tc">Left</div>
		<div class="mid tc">
				<div class="verzenden">Mid top</div>
				<div class="berichten">
						<p>Mid-bottom</p>
						<p>Mid-bottom</p>
						<p>Mid-bottom</p>
				</div>
		</div>
		<div class="rightbar sidebar tc">Right</div>
</div>
</body>
</html>

The benefit of this approach is that you get equal columns without specifying heights and get a layout that doesn’t break when squashed. The drawbacks are if you need to position something absolute in relation to the column and then older browsers support becomes awkward.

1 Like

just curious, does that mean including IE8, or everything >IE8 ?

From (and including) IE8 and upwards (plus every other browser there is):slight_smile:

Thank you all guys for the input. For me, that I did not have to change to many things I have chosen to use the method given by ScallioXTX

@rpkamp Thanks for that

You’re welcome, but @PaulOB 's solution is better. Just so you know :smile:

Hi ScallioXTX.

I had a look at that as well. But I have to show something later on today, so when all is ok, I still can adjust :wink: