Float CSS Problem

HTML & CSS
1

can anyone tell me how to solve this problem? Picture attached here.

Div1 is floated left;

Div2 was isn’t floated left so it goes like this;when was floated it goes entirely below Div1(due to width problem).

Also please tell me how can we make container of the size of its floated contents?

Thankyou

2

Not sure what you mean by the last bit, but to stop the div2 text wrapping, you can give is overflow: hidden;

It would be easier if we could see this live, or at least your code in terms of the container question. Generally, you need to give your floats a set width for them to sit side by side.

3

I presume you’re wanting the right div to not wrap around the floating div and stay in its own column. This is a fairly common use case, and the starting HTML at a base will look something like this.


<body>
  <header></header>
  <section>
    <nav></nav>
    <article></article>
  </section>
  <footer></footer>
</body>

The section will be our container. Nav will be our “div1” and article will be our “div2”. The nav I presume is fixed and the article column will be allowed to take all available space.


section {
  padding-left: 200px; /*width of the nav */
}

nav {
  float: left;
  width: 200px;
  margin-left: -200px; 
}

article { width: 100% }

footer { clear: both; }

So, we float the nav and push it left a distance equal to its width. This gets it out of the article’s way. The footer then has a clear set to prevent the nav from floating over it.

When you’re ready to go to 3 columns things get a bit trickier: http://www.alistapart.com/articles/holygrail/

4

Thanks it was really good.

5

Thanks Ralph :slight_smile:

6

I feel that I should point out that although that method appears to work well it is slightly flawed in that you can no longer have any elements in the main column that are set to clear:both. If for example you have a floated image in the main column and you want to clear the content that follows it then you end up with all the rest of the content down below the sidebar. You actually clear all floated elements in the html before because the article element does not create a new “block formatting context”.

You would need to nest an inner div inside the article element and set it to be floated and 100% wide and then keep all the inner content inside that.

You can see the difference here:
e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
section { padding-left: 200px; /*width of the nav */ }
nav {
	float: left;
	width: 200px;
	margin-left: -200px;
	background:red;
	padding-bottom:100px;
}
article { width: 100% }
footer { clear: both; }
.inner {
	width:100%;
	float:left;
}
</style>
</head>

<body>
<header></header>
<section>
		<nav>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</nav>
		<article>
				<div class="inner">
						<p>This is a test</p>
						<p>This is a test</p>
						<p style="float:left">This is a float</p>
						<p style="clear:both">Clearing element</p>
						<p>This is a test</p>
						<p>This is a test</p>
				</div>
		</article>
</section>
<footer>footer</footer>
</body>
</html>

If you don’t need visible overflow then the method Ralph suggests will do all that automatically anyway but will need zoom:1.0 for ie7 and under (or a valid property that gives layout).