CSS A simple problem - Or is it?

HTML & CSS
1

Hello all, im new to the forum and was attracted to this forum due to the sheer amount of brain power and experience you guys have.

So I must now call on you generosity.

Here we go.

I created 1 container.

One float left 50% width.

One float right 50% width.

Gave them both 100% height. The container is 500px high. So I have a nice Green side and a nice red side.

Simple.

This is where I get confused.

I add one more float right.

However it appears outside of my container. But it is certainly not in my HTML.

Would anyone care to take a look at how retarded I am. I just need some one to say why this is doing what it is doing and any possible fix or alternative. So my theory can advance. I have been doing HTML and CSS now for a year and a half. For some reason I have never come across this before.

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="base.css" />
<title>Test</title>
</head>

<body>
<div class="container">

<div class="left">This is the left side</div>

<div class="right">This is the right side</div>

<div class="right_div">test</div>

</div>
</body>
</html>

CSS


@charset "utf-8";
/* CSS Document */

div.container {
	width:100%;
	height:500px;
	border: 2px solid black;
}

div.left {
	float:left;
	height:100%;
	background-color:#0F6;
	width:50%;
	color:#0F6;
}

div.right {
	float:right;
	height:100%;
	background-color:#F00;
	width:50%;
}

div.right_div { 
	float:right;
	height:10px;
	border: 2px solid black;
}

See my retarded work here

http://www.jontiz.co.uk

Seems to look the same in all modern main stream browsers.

2

Hello, Jonathan,

This is happening because the first two divs (.left, .right) are taking up 100% of the container width as well as 100% of the container height.

As a result, your ‘.right_div’ is getting pushed to a new line and overflows below the container (.container). Try reducing those percentages (.right in particular) to see what I mean.
:slight_smile:

3

Yea I had a bash at fixing this particular issue via adding a negative margin on the element with the height of its exact size.

Thanks

4

Hi, the problem was rounding errors because 50%+50% can be sometimes more then 100% depending on the resolution.

THough you reduced the width so you fixed it so good job :slight_smile: