Float CSS Problem

**moneysharma** · Oct 26, 2012 15:58

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

**ralph.m** · Oct 26, 2012 18:54

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.

**Michael Morris** · Oct 26, 2012 20:38

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.

Code html:

<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.

Code css:

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/

**moneysharma** · Oct 27, 2012 03:04

Originally Posted by Michael Morris

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.

Code html:

<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.

Code css:

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.

Thanks it was really good.

**moneysharma** · Oct 27, 2012 03:04

Originally Posted by ralph.m

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.

Thanks Ralph

**Paul O'B** · Oct 27, 2012 08:04

Originally Posted by Michael Morris

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.

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.

Code:

<!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).

User Tag List

Thread: Float CSS Problem

Thread Tools

Display

Float CSS Problem

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions